Flutter ListView separated

Juni 19, 2019

In diesem Post geht es um den ListView in Flutter. Um genau zu sein, um den ListView.separated.

Wie der Name schon suggerieren könnte, kann man mit Hilfe dieses Widgets bequem eine Trennung der einzelnen Listen Elemente erreichen. Gehen wir aber gleich zum Code:

class ListViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: 5,
      separatorBuilder: (BuildContext context, int index)=> Divider(),
      itemBuilder: (BuildContext context, int index){
        return ListTile(       
          title:Text("Mein kleines Demo") ,
          subtitle: Text("und das sollte ein Untertitel sein"),
          isThreeLine: true,
          leading: CircleAvatar(
            child: Icon(Icons.person),
            ),
          
          );
      },
    );
  }
}

Der Code oben ist lauffähig, vorausgesetzt man integriert das ListViewDemo Widget, in eine MaterialApp Struktur.

itemCount

Wenn wir die Anzahl der Items angeben müssen, ist auch klar das es sich hier um eine Liste mit fixer Größe handelt. Das ist nicht für alle Anwendungsfälle geeignet. Ich habe jetzt noch keine Variante mit Konstruktor getestet, wo man den Wert für itemCount dynamisch übergeben könnte. Aber das sollte möglich sein.

separatorBuilder

Hier fängt es an spannend zu werden. separatorBuilder übergeben wir eine Funktion, die das trennende Element erstellt. Im Code oben ist es ein Divider(...), genau so möglich sind andere Elemente. Getestet habe ich es zum Beispiel mit Container(...).

itemBuilder

Auch hier müssen wir eine Funktion übergeben, die unsere Listen Elemente erstellt. Es ist nicht unlogisch, das hier ListTile verwendet wird, aber es sind auch hier andere Widgets erlaubt.

ListTile title

Flutter ist in das Material Design Konzept von Google eingebetet und so gesehen macht ListTile Sinn. title ist der Haupttext des Listen Elements. Der Name zeigt schon an, das hier mit einer kurzen Zeichenkette gerechnet wird.

ListTile isThreeLine

Ein bool Wert, wenn auf true gesetzt bzw verwendet, muss der Eintrag subtitle auch benutzt werden.
Die Grundeinstellung ist title und optional subtitle, also zwei Zeilen Text, wenn beide benutzt werden. isThreeLine erhöht diese Zahl auf drei. Eine Zeile für title und zwei Zeilen für subtitle.

ListTile leading

Dieser Eintrag ermöglicht ein anführendes Element. Das kann ein Text, oder wie im Beispiel oben auch ein anderes Widget sein, CircleAvatar(...) zum Beispiel.

Ich gehe hier nicht auf alle Einträge ein. Wie immer kann man sich in der sehr guten Dokumentation von Flutter weiter informieren. Bis bald !

Dieses Blog durchsuchen

Flutter, Dart und mehr !