Flutter Mobile Development · Pelajaran

Membangun Daftar yang Dapat Digulir dengan ListView

Tampilkan koleksi yang dapat digulir secara efisien di Flutter menggunakan ListView, ListView.builder, dan pemisah item.

Pelajaran 4 dari 413 langkah

Membangun Daftar yang Dapat Digulir dengan ListView adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Why ListView?

Most apps show lists: messages, products, feeds. A ListView arranges its children in a scrollable column, handling overflow automatically when content exceeds the screen.

A Simple ListView

Pass a fixed set of children. Good for short, known lists.

ListView(
  children: [
    Text("Apple"),
    Text("Banana"),
    Text("Cherry"),
  ],
)

ListTile for Rows

ListTile is a ready-made row with leading icon, title, subtitle, and trailing widget, perfect for menus and settings.

ListTile(
  leading: Icon(Icons.person),
  title: Text("Ada Lovelace"),
  subtitle: Text("Mathematician"),
  trailing: Icon(Icons.chevron_right),
)

The Problem with Long Lists

A plain ListView builds every child up front. For hundreds of items this wastes memory and slows startup. We need lazy building.

ListView.builder

ListView.builder creates items on demand as they scroll into view, so only visible rows exist in memory.

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

itemCount and itemBuilder

itemCount tells Flutter how many rows exist; itemBuilder is called with each index to build that row. Omitting itemCount makes an infinite list.

Adding Separators

ListView.separated inserts a divider widget between items, keeping spacing consistent.

ListView.separated(
  itemCount: items.length,
  itemBuilder: (c, i) => ListTile(title: Text(items[i])),
  separatorBuilder: (c, i) => Divider(),
)

Horizontal Lists

Set scrollDirection: Axis.horizontal to scroll sideways, useful for carousels and chip rows.

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: tags.length,
  itemBuilder: (c, i) => Chip(label: Text(tags[i])),
)

Lists Inside Columns

A ListView wants unbounded height, which conflicts with a Column. Wrap it in Expanded to give it the remaining space.

Column(
  children: [
    Text("Header"),
    Expanded(
      child: ListView.builder(...),
    ),
  ],
)

Handling Taps

Make rows interactive with onTap on a ListTile or by wrapping items in GestureDetector/InkWell.

ListTile(
  title: Text(items[index]),
  onTap: () => print("Tapped " + items[index]),
)

Putting It Together

Use ListView.builder for performance, ListTile for clean rows, separated for dividers, and wrap in Expanded inside columns.

Quick Check

Test your understanding of Flutter lists.

Jawab di pelajaran interaktif

Recap

You built scrollable lists:

ListView for short fixed lists
ListView.builder for efficient long lists
ListTile rows and separated dividers
Wrap in Expanded inside a Column

Gratis untuk memulai

Belajar Dart dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 22
Pelajaran: 88

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Daftar yang Dapat Digulir dengan ListView” gratis?

Ya — teks lengkap “Membangun Daftar yang Dapat Digulir dengan ListView” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun Daftar yang Dapat Digulir dengan ListView”?

Tampilkan koleksi yang dapat digulir secara efisien di Flutter menggunakan ListView, ListView.builder, dan pemisah item. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?

Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Membangun Daftar yang Dapat Digulir dengan ListView” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?

Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Widget Stateless vs. Stateful
Widget Tata Letak Dasar
Elemen UI Interaktif
Membangun Daftar yang Dapat Digulir dengan ListView

← Kembali ke Flutter Mobile Development