Zeilen mit Trennzeichen

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

Eine lange Liste ist übersichtlicher, wenn zwischen den Zeilen eine Linie steht. Bei einem Builder kannst du die Divider nicht von Hand schreiben. Deshalb gibt es eine zweite Art von Builder-Liste, die sie für dich hinzufügt:

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

separatorBuilder wird für jede Lücke zwischen zwei Zeilen aufgerufen und gibt das Widget zurück, das dort eingefügt wird. Eine Liste mit 15 Zeilen hat 14 Trennelemente, und nach der letzten Zeile kommt nie eines.

Das Trennelement kann ein beliebiges Widget sein: ein Divider oder ein SizedBox für einfachen Abstand.

Aufgabe

Einfach

Ändere die Playlist in eine ListView.separated mit einem Divider zwischen je zwei Songs.

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: songs.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(songs[index]));
          },
        ),
      ),
    );
  }
}