Flutter: ListView-Widget verwenden

ListView ist in Flutter das grundlegende Widget für scrollbare Listen. Damit erzeugen Sie vertikal oder horizontal angeordnete Elemente. Für Auflistungen gehört es zu den am häufigsten genutzten Widgets.

Live-Demo

Sie können dieses Widget im interaktiven Beispiel unten ausprobieren:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Grundlegende Verwendung

ListView(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Wichtige Eigenschaften

Eigenschaft	Beschreibung
scrollDirection	Scrollrichtung (vertikal/horizontal)
padding	Innenabstand
reverse	Umgekehrte Reihenfolge
physics	Scrollverhalten
shrinkWrap	Größe an den Inhalt anpassen
itemExtent	Feste Höhe der Elemente

Klassische Verwendung mit ListTile

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.person),
      title: Text('Username'),
      subtitle: Text('Subtitle'),
      trailing: Icon(Icons.chevron_right),
      onTap: () {},
    ),
    ListTile(
      leading: Icon(Icons.email),
      title: Text('Email'),
      subtitle: Text('[email protected]'),
      trailing: Icon(Icons.chevron_right),
    ),
  ],
)

Eigene Zeilengestaltung (jenseits von ListTile)

Neben ListTile können Sie auch eigene Zeilenlayouts entwerfen:

ListView(
  padding: EdgeInsets.all(8),
  children: [
    Container(
      padding: EdgeInsets.all(16),
      margin: EdgeInsets.only(bottom: 8),
      decoration: BoxDecoration(
        color: Colors.blue.shade50,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.blue),
      ),
      child: Row(
        children: [
          CircleAvatar(
            backgroundColor: Colors.blue,
            child: Icon(Icons.star, color: Colors.white),
          ),
          SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Custom Title', style: TextStyle(fontWeight: FontWeight.bold)),
                Text('Custom subtitle text'),
              ],
            ),
          ),
          IconButton(
            icon: Icon(Icons.favorite_border),
            onPressed: () {},
          ),
        ],
      ),
    ),
  ],
)

Horizontale ListView

Mit der Eigenschaft scrollDirection ordnen Sie Listen horizontal an:

Container(
  height: 120, // Fixed height required for horizontal list
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: [
      Container(
        width: 100,
        margin: EdgeInsets.all(8),
        color: Colors.red,
        child: Center(child: Text('1')),
      ),
      Container(
        width: 100,
        margin: EdgeInsets.all(8),
        color: Colors.green,
        child: Center(child: Text('2')),
      ),
      Container(
        width: 100,
        margin: EdgeInsets.all(8),
        color: Colors.blue,
        child: Center(child: Text('3')),
      ),
    ],
  ),
)

Dynamische Listen mit ListView.builder

Für dynamisch erzeugte Listen wird die Variante .builder verwendet. Bei großen Listen ist sie für die Performance sehr wichtig, weil nur sichtbare Elemente erzeugt werden:

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(child: Text('$index')),
      title: Text('Item $index'),
      subtitle: Text('Description of this item'),
    );
  },
)

Eigene Gestaltung mit ListView.builder

final List<Map<String, dynamic>> items = [
  {'title': 'Flutter', 'icon': Icons.flutter_dash, 'color': Colors.blue},
  {'title': 'Dart', 'icon': Icons.code, 'color': Colors.teal},
  {'title': 'Firebase', 'icon': Icons.cloud, 'color': Colors.orange},
];

ListView.builder(
  itemCount: items.length,
  padding: EdgeInsets.all(16),
  itemBuilder: (context, index) {
    final item = items[index];
    return Card(
      margin: EdgeInsets.only(bottom: 12),
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Row(
          children: [
            Icon(item['icon'], size: 40, color: item['color']),
            SizedBox(width: 16),
            Expanded(child: Text(item['title'], style: TextStyle(fontSize: 18))),
            ElevatedButton(
              onPressed: () {},
              child: Text('Details'),
            ),
          ],
        ),
      ),
    );
  },
)

ListView.separated mit Trennlinien

ListView.separated(
  itemCount: 10,
  separatorBuilder: (context, index) => Divider(
    color: Colors.grey,
    height: 1,
  ),
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)

Scrollsteuerung

final ScrollController _scrollController = ScrollController();

ListView.builder(
  controller: _scrollController,
  itemCount: 50,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
)

// Scroll list to top
_scrollController.animateTo(
  0,
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
);

Zusammenfassung

• ListView: Grundlegendes Widget für scrollbare Listen
• scrollDirection: Horizontales oder vertikales Scrollen
• ListView.builder: Dynamische und performante Auflistung
• ListView.separated: Listen mit Trennlinien
• ListTile: Standard-Listeneintrag
• Eigene Layouts: Individuelle Zeilen mit Container oder Card

ListView ist der Grundbaustein für Auflistungen in Flutter und bietet verschiedene Varianten für unterschiedliche Szenarien.