Zeilen mit einem Builder erstellen

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

Eine Playlist kann Tausende von Songs enthalten. Für jeden einzelnen ein ListTile zu schreiben, ist nicht möglich, und alle auf einmal zu erstellen, wäre langsam. ListView.builder erstellt jede Zeile erst dann, wenn sie beim Scrollen sichtbar wird.

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

itemCount gibt an, wie viele Zeilen es gibt. itemBuilder ist eine Funktion, die die Liste für jede Zeile mit dem index der Zeile aufruft: 0 für die erste Zeile, 1 für die nächste und so weiter. Sie gibt das Widget für diese Zeile zurück.

Verwende songs.length für itemCount, damit die Liste wächst, wenn die Songliste länger wird. Eine Zahl, die größer als die Länge der Liste ist, fordert einen Song an, den es nicht gibt, und die App wird mit einem RangeError beendet.

Aufgabe

Einfach

Die Wiedergabeliste enthält 15 Songs, aber es werden nur 3 angezeigt. Korrigiere itemCount, damit jeder Song in der Liste enthalten ist, bis hin zu Starfall, und die Liste auch dann stimmt, wenn Songs hinzugefügt werden.

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) {
    final List<String> songs = [
      'Morning Light',
      'Paper Planes',
      'City Rain',
      'Slow River',
      'Neon Nights',
      'Golden Hour',
      'Northern Wind',
      'Blue Harbor',
      'Quiet Storm',
      'Summer Static',
      'Echo Valley',
      'Last Train',
      'Silver Lines',
      'Open Road',
      'Starfall',
    ];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Playlist')),
        body: ListView.builder(
          itemCount: 3,
          itemBuilder: (context, index) {
            return ListTile(title: Text(songs[index]));
          },
        ),
      ),
    );
  }
}