Membuat Baris dengan Builder

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 6 dari 33.

Sebuah playlist dapat menampung ribuan lagu. Menulis ListTile untuk setiap lagu tidak mungkin, dan membuat semuanya sekaligus akan lambat. ListView.builder membuat setiap baris hanya saat baris itu masuk ke tampilan saat digulir.

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

itemCount menentukan jumlah baris. itemBuilder adalah fungsi yang dipanggil list untuk setiap baris, dengan index baris tersebut: 0 untuk baris pertama, 1 untuk baris berikutnya, dan seterusnya. Fungsi itu mengembalikan widget untuk baris tersebut.

Gunakan songs.length untuk itemCount, agar list bertambah saat daftar lagu bertambah. Angka yang lebih besar daripada jumlah lagu di list akan meminta lagu yang tidak ada, dan aplikasi akan berhenti dengan RangeError.

Tantangan

Mudah

Playlist ini memiliki 15 lagu, tetapi hanya 3 yang ditampilkan. Perbaiki itemCount agar semua lagu ada di dalam list, hingga Starfall, dan jumlahnya tetap benar saat lagu ditambahkan.

Coba sendiri

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