ListView: Menampilkan Daftar

Mengapa tidak pakai Column?

Kalau isinya lebih panjang dari layar, Column akan menampilkan garis kuning-hitam tanda overflow karena ia tidak bisa digulir. Untuk daftar panjang, gunakan ListView, widget yang otomatis bisa digeser ke atas-bawah.

ListView sederhana

ListView(
  children: [
    ListTile(title: Text('Satu')),
    ListTile(title: Text('Dua')),
    ListTile(title: Text('Tiga')),
  ],
)

Cocok untuk daftar pendek yang jumlahnya tetap.

ListView.builder: untuk daftar dari data

Biasanya daftar berasal dari data (List). ListView.builder membuat item hanya yang terlihat di layar, sehingga tetap ringan walau datanya ribuan.

final tugas = ['Belajar Dart', 'Belajar Widget', 'Buat Aplikasi'];

ListView.builder(
  itemCount: tugas.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: const Icon(Icons.check_circle_outline),
      title: Text(tugas[index]),
    );
  },
)

• itemCount — jumlah item (biasanya data.length).
• itemBuilder — function yang dipanggil Flutter untuk tiap item yang perlu ditampilkan. Parameter index adalah nomor urut item (0, 1, 2, ...), dipakai untuk mengambil data: tugas[index].
• ListTile — satu baris siap pakai dengan leading (di kiri), title (judul), subtitle (keterangan), dan trailing (di kanan).

Daftar di dalam Scaffold

Taruh ListView langsung sebagai body dari Scaffold. Jangan menaruhnya di dalam Column tanpa pembungkus Expanded, karena ukuran tingginya tidak terbatas dan Flutter akan memprotesnya.