Flutter Widget : Cara Menggunakan ListView pada Flutter

List merupakan salah satu hal yang mendasar dalam mempelajari layout sebuah aplikasi. Contoh penggunaan list pada aplikasi mobile umumnya dapat kita temukan di daftar kontak atau aplikasi berita. Membuat sebuah List widget yang dapat di scroll pada Flutter cukup mudah dengan menggunakan widget ListView. Jika anda seorang android developer maka ListView widget mirip dengan RecyclerView atau juga dapat sebagai ScrollView namun dengan penggunaan yang jauh lebih mudah

Pada tutorial kali ini kita akan coba fokus membahas tentang cara menggunakan ListView pada flutter dengan benar beserta tutorial cara implementasinya

Jenis ListView

Jenis ListView widget dibagi berdasarkan cara penggunaanya. Terdapat tiga empat cara yang biasanya digunakan untuk membuatnya yaitu sebagai berikut:

1. ListView
2. ListView.builder
3. ListView.separated
4. ListView.custom

ListView

Ini adalah bentuk default dari sebuah ListView class. Dengan ListView maka children atau widget yang ada di dalamnya akan menjadi scrollable (bisa di scroll). Penggunaan default ListView ini hanya untuk widget yang bersifat statis. Statis yang dimaksud bukan untuk isi kontennya melainkan lebih kepada jumlah widget di dalamnya.

Penggunaan default ListView :

Contoh kasus misalkan kita ingin membuat sebuah halaman detail aplikasi baca berita. Dimana biasanya untuk halaman tesebut umumnya memiliki item judul dan deskripsi. Untuk panjang deskripsi pada sebuah berita beragam dan bisa sangat panjang.

Dari contoh kasus di atas kita dapat simpulkan bahwa untuk jumlah item widgetnya sudah pasti (fix) yaitu hanya dua widget saja (title dan deskripsi). sedangkan untuk ukuran dari tinggi widget deskripsi bersifat dinamis sehingga ada kemungkinan melebihi ukuran tinggi layar. Pada kasus seperti ini maka ListWidget adalah yang paling aman. contoh kodenya seperti dibawah ini

body: ListView(
  children: <Widget>[
    Container(
      padding: EdgeInsets.all(15),
      child: Text('Flutter Widget: Penggunaan ListView Class',
          style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)
      ),
    ),
    Container(
        padding: EdgeInsets.all(15),
        child: Text(
            '''Lorem Ipsum adalah contoh teks atau ...''',
            style: TextStyle(fontSize: 16)
        ),
    ),
  ]
)

Penjelasan : widget ListView memiliki 2 buah container dengan tiap containernya memiliki text widget. Untuk text sengaja tidak disertakan secara penuh agar kode mudah dibaca. untuk contoh text nya dapat dilihat di https://id.lipsum.com/

Seperti yang dapat kita lihat pada gambar diatas bahwa apabila text melewati ukuran layar maka akan otomatis menjadi scrollable.

Lalu bagaimana jika ListView nya kita ganti menjadi Column ? maka hasilnya akan menjadi seperti ini

ListView.builder

Untuk list yang bersifat dinamis ( jumlah list item mengikuti dari jumlah data ) maka gunakan ListView.builder.

ListView.builder memiliki dua properti utama yaitu itemCount (jumlah list item) dan itemBuilder (untuk membangun tampilan dari list item). Secara sederhana penggunaan kode listview.builder sebagai berikut

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (context, position) {
    return listItem();
  },
),

Sebagai contoh penerapan rillnya, kita coba menampilkan list nama bulan dalam satu tahun. Maka kodingan dan tampilannya akan menjadi seperti dibawah ini

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BelajarListView(),
    );
  }
}

class BelajarListView extends StatelessWidget {
  final List bulan = [
    "Januari",
    "Fabruari",
    "Maret",
    "April",
    "Mei",
    "Juni",
    "Juli",
    "Agustus",
    "September",
    "Oktober",
    "November",
    "Desember"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("belajarFlutter.com"),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return Card(
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Text(bulan[index], style: TextStyle(fontSize: 30)),
            ),
          );
        },
        itemCount: bulan.length,
      ),
    );
  }
}

Kita bisa saja menggunakan default ListView dengan mengopy paste widget sebanyak 12 kali tapi itu TIDAK efisien. Sebaiknya hindari pengulangan kode yang sama.

Penggunaan ListView juga biasanya digabungnya dengan ListTile Widget. Widget ini umumnya digunakan untuk membuat kontak list atau layout yang membutuhkan thumbnail beserta subtitle. Struktur dari LisTile kurang lebih seperti ini

Untuk penggunaannya silahkan lihat pada kodigan dibawah

body: ListView.builder(
  itemBuilder: (context, index) {
    return Card(
      child: ListTile(
          title: Text(
            bulan[index], 
            style: TextStyle(fontSize: 30)
          ),
          subtitle: Text('ini subtitle dari ' + bulan[index]),
          leading: CircleAvatar(
            child: Text(
              bulan[index][0], // ambil karakter pertama text
              style: TextStyle(fontSize: 20)
            ),
          )
      ),
    );
  },
  itemCount: bulan.length,
),

ListView.separated

Mirip dengan ListView.builder namun memiliki sedikit perbedaan yaitu dengan widget ini kita dapat menyisipkan widget di antara item list.

body: ListView.separated(
  itemBuilder: (context, index) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Text(bulan[index], style: TextStyle(fontSize: 30)),
      ),
    );
  },
  separatorBuilder: (context, position) {
    return Container(
      color: Colors.greenAccent,
      child: Text('Ini contoh separator Builder',
          style: TextStyle(fontSize: 20)),
    );
  },
  itemCount: bulan.length,
),

tampilannya menjadi seperti ini

Contoh rill penggunaan ListView.separated biasanya dapat kita temukan di aplikasi baca berita. Dimana biasaya digunakan untuk memunculkan iklan di antara daftar beritanya.

body: ListView.separated(
  itemBuilder: (context, index) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Text(bulan[index], style: TextStyle(fontSize: 30)),
      ),
    );
  },
  separatorBuilder: (context, position) {
    if (position % 5 == 0) {
      return Container(
        height: 60,
        color: Colors.greenAccent,
        child: Center(
            child: Text('Space Iklan-iklanan',
                style: TextStyle(fontSize: 20))),
      );
    } else {
      return Divider();
    }
  },
  itemCount: bulan.length,
),

Penutupan

Secara default, ListView widget memilik padding antar widget nya, jika ingin mengilangkan paddingnya silahkan set padding ke EdgeInsets.all(0.0).

Pemilihan widget yang tepat akan sangat membantu dalam proses development sebuah aplikasi. Contoh diatas juga hanya sebatas dasar saja, untuk penggunaan lebih lanjut silahkan explorasi sendiri atau tunggu artikel menarik lainnya di belajarFlutter.com

Sumber Referensi :
https://api.flutter.dev/flutter/widgets/ListView-class.html