Listenelemente

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 2 von 33.

Die meisten Zeilen in einer Liste sehen ähnlich aus: eine Hauptzeile, manchmal eine kleinere Zeile darunter, vielleicht ein Symbol an jedem Ende. ListTile ist eine solche Zeile, bereits fertig gestaltet, mit den passenden Größen und Abständen.

ListTile(
  title: Text('Ada Lovelace'),
  subtitle: Text('+1 555 0101'),
)

Der title ist die Hauptzeile. Der subtitle steht darunter, kleiner und in einer dezenteren Farbe. Beide nehmen ein Widget entgegen, normalerweise ein Text.

Ein ListTile ist so breit wie seine Liste und wächst auf zwei Zeilen an, wenn er einen Untertitel hat. Füge mehrere in eine ListView ein, und du erhältst eine Kontaktliste.

Aufgabe

Einfach

Adas Zeile ist bereits eine ListTile. Wandle die beiden anderen Texte in Kacheln wie ihre um:

Alan Turing mit dem Untertitel +1 555 0102
Grace Hopper mit dem Untertitel +1 555 0103

Probier es selbst

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Contacts')),
        body: ListView(
          children: const [
            ListTile(
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
            ),
            Text('Alan Turing'),
            Text('Grace Hopper'),
          ],
        ),
      ),
    );
  }
}