Construire des lignes avec un générateur

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 6 sur 33.

Une liste de lecture peut contenir des milliers de chansons. Écrire un ListTile pour chacune d’elles n’est pas possible, et les créer toutes en même temps serait lent. ListView.builder crée chaque ligne uniquement lorsqu’elle devient visible pendant le défilement.

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

itemCount indique le nombre de lignes. itemBuilder est une fonction que la liste appelle pour chaque ligne, avec l’index de la ligne : 0 pour la première ligne, 1 pour la suivante, et ainsi de suite. Elle renvoie le widget correspondant à cette ligne.

Utilisez songs.length pour itemCount, afin que la liste s’agrandisse lorsque la liste de chansons s’allonge. Un nombre supérieur à la taille de la liste demande une chanson qui n’existe pas, et l’application s’arrête avec une RangeError.

Défi

Facile

La liste de lecture contient 15 chansons, mais seulement 3 s’affichent. Corrige itemCount pour que toutes les chansons figurent dans la liste, jusqu’à Starfall, et que le nombre reste correct lorsque des chansons sont ajoutées.

Essayez vous-même

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