Die Zeilen nummerieren

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

Der index, den der Builder erhält, dient nicht nur dazu, das richtige Lied zu finden. Er gibt die Position der Zeile in der Liste an, sodass du sie anzeigen kannst.

itemBuilder: (context, index) {
  return ListTile(
    leading: Text('$index'),
    title: Text(songs[index]),
  );
},

Dadurch wird neben dem ersten Lied 0 angezeigt, denn in Dart beginnt das Zählen bei 0. Menschen zählen ab 1, also zeige index + 1 an. Eine Berechnung innerhalb eines Strings kommt in geschweifte Klammern: '${index + 1}'.

Aufgabe

Einfach

Nummeriere die Songs: Gib jedem ListTile einen leading:-CircleAvatar mit der Nummer des Songs, beginnend mit 1 für Morning Light.

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]));
          },
        ),
      ),
    );
  }
}