Construindo linhas com um Builder

Parte da seção Listas e telas do Journey de Flutter da Coddy. Lição 6 de 33.

Uma playlist pode conter milhares de músicas. Não é possível escrever um ListTile para cada uma, e criá-las todas de uma vez seria lento. ListView.builder cria cada linha somente quando ela entra na área visível durante a rolagem.

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

itemCount indica quantas linhas existem. itemBuilder é uma função que a lista chama para cada linha, com o index da linha: 0 para a primeira linha, 1 para a próxima e assim por diante. Ela retorna o widget dessa linha.

Use songs.length para itemCount, assim a lista cresce quando a lista de músicas aumenta. Um número maior que o tamanho da lista faz com que seja solicitada uma música que não existe, e o app para com um RangeError.

Desafio

Fácil

A playlist tem 15 músicas, mas apenas 3 aparecem. Corrija itemCount para que todas as músicas estejam na lista, até Starfall, e continue correto quando músicas forem adicionadas.

Experimente você mesmo

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