Dart Kurs Weiter zu Klassen

Lektion 13 - Listen in Flutter

Aus Daten werden sichtbare Widgets

Listen sind in Flutter sehr wichtig: Du hast mehrere Daten, zum Beispiel Namen, Aufgaben oder Produkte, und erzeugst daraus mehrere sichtbare Widgets.

1. Dart-Liste wiederholen

Eine Liste speichert mehrere Werte in einer Reihenfolge.

final names = ['Jutta', 'Jens', 'Mira'];

print(names[0]); // Jutta

2. Liste zu Widgets machen

Flutter braucht Widgets. Deshalb wandelst du Listeneintraege oft in Text, Card oder eigene Widgets um. 

Column(
  children: names
      .map((name) => Text(name))
      .toList(),
)

3. map verstehen

map geht jeden Eintrag durch und macht daraus etwas Neues. In Flutter: Aus jedem Datensatz wird ein Widget. 

name -> Text(name)
'Jutta' -> Text('Jutta')
'Jens'  -> Text('Jens')
'Mira'  -> Text('Mira')

toList() ist wichtig, weil children eine echte Liste von Widgets erwartet.

4. ListView

Wenn eine Liste laenger werden kann, ist ListView besser als eine einfache Column. ListView kann scrollen. 

ListView(
  children: names
      .map((name) => ListTile(title: Text(name)))
      .toList(),
)

5. ListView.builder

ListView.builder baut Eintraege erst, wenn sie gebraucht werden. Das ist gut fuer lange Listen. 

ListView.builder(
  itemCount: names.length,
  itemBuilder: (context, index) {
    final name = names[index];
    return ListTile(title: Text(name));
  },
)
itemCount

Wie viele Eintraege gibt es?

index

Position des aktuellen Eintrags.

itemBuilder

Funktion, die fuer jeden Eintrag ein Widget baut.

6. Listen veraendern mit State

Wenn du Eintraege hinzufuegst oder entfernst, muss das in setState passieren. 

final List<String> tasks = [];

void addTask(String task) {
  setState(() {
    tasks.add(task);
  });
}

7. Listen-Planungsaufgabe

Plane eine Aufgabenliste: Ein Button fuegt eine Aufgabe hinzu, die Liste zeigt alle Aufgaben.

Setze tasks als leere Liste

Zeige alle Aufgaben als Liste

Wenn Button "Hinzufuegen" gedrueckt wird:
  Fuege neue Aufgabe zur Liste hinzu
  Zeichne UI neu

Fuer jede Aufgabe in tasks:
  Erzeuge ein sichtbares Listenelement
  1. Schreibe den Widget-Baum fuer diese Aufgabe.
  2. Baue die Anzeige einmal mit Column und einmal mit ListView.builder.
  3. Erklaere, warum setState beim Hinzufuegen notwendig ist.
Weiter zu Klassen & Attributen