Creare righe con un builder

Fa parte della sezione Elenchi e schermate del percorso Flutter di Coddy. Lezione 6 di 33.

Una playlist può contenere migliaia di canzoni. Scrivere un ListTile per ognuna non è possibile, e crearle tutte in una volta sarebbe lento. ListView.builder crea ogni riga solo quando entra nell'area visibile durante lo scorrimento.

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

itemCount indica quante righe ci sono. itemBuilder è una funzione che la lista chiama per ogni riga, con l'index della riga: 0 per la prima riga, 1 per la successiva e così via. Restituisce il widget per quella riga.

Usa songs.length per itemCount, così la lista cresce quando aumenta l'elenco delle canzoni. Un numero maggiore della lunghezza dell'elenco cerca una canzone che non c'è e l'app si arresta con un RangeError.

Sfida

Facile

La playlist ha 15 brani, ma ne vengono mostrati solo 3. Correggi itemCount in modo che ogni brano sia nell’elenco, fino a Starfall, e che continui a funzionare quando vengono aggiunti altri brani.

Provalo tu

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