Crear filas con un constructor

Parte de la sección Listas y pantallas del Journey de Flutter de Coddy. Lección 6 de 33.

Una lista de reproducción puede contener miles de canciones. No es posible escribir un ListTile para cada una, y crearlos todos a la vez sería lento. ListView.builder crea cada fila solo cuando aparece en pantalla al desplazarse.

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

itemCount indica cuántas filas hay. itemBuilder es una función que la lista llama para cada fila, con el index de la fila: 0 para la primera fila, 1 para la siguiente, y así sucesivamente. Devuelve el widget de esa fila.

Usa songs.length para itemCount, así la lista crece cuando aumenta la lista de canciones. Un número mayor que la cantidad de elementos de la lista intenta acceder a una canción que no existe, y la aplicación se detiene con un RangeError.

Desafío

Fácil

La lista de reproducción tiene 15 canciones, pero solo se muestran 3. Corrige itemCount para que todas las canciones estén en la lista, hasta Starfall, y siga siendo correcto cuando se añadan canciones.

Pruébalo tú mismo

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