ListView builder di Flutter

ListView merupakan salah satu widget yang begitu penting di dalam flutter. ListView tersebut kita gunakan untuk membuat daftar atau list (list of children). Tetapi ketika kita ingin membuat daftar secara rekursif tanpa menulis kode lagi dan lagi maka ListView.builder digunakan sebagai pengganti ListView.
Untuk menampilkan data yang dinamis dan dalam jumlah yang banyak maka ListView.builder merupakan
pilihan yang tepat dalam menampilkan data dalam bentuk list tanpa menurunkan performa apliksi.
Dengan kita menggunakan ListView builder ini, aplikasi kita hanya menampilkan data yang tampak dilayar saja, sisanya akan ditampilkan saat layar di scroll ke bawah atau ke atas. ListView.builder membuat susunan widget linier yang dapat digulir atau discroll.

Daftar isi:

1. Persiapan Membuat Listview Builder di flutter
2. Membuat project flutter baru
3. Membuat class untuk data di listview builder
4. Membuat listview builder
5. Penutup

1.Persiapan Membuat Listview Builder

1. Persiapkan text editor untuk membuat code nantinya, disini saya menggunakan Vscode yach.. untuk cara instal vscode bisa cek disini
2. Koneksi internet yang lumayan kenceng kalau bisa.
3. Semangat yang pantang menyerah
4. Keberanian untuk terus mencoba dan mencoba dalam membuat code.Membuat project flutter baru

2. Membuat project flutter baru

Langkah pertama kita tentunya membuat project baru dengan nama List atau anda bisa menentukan sendiri nama projectnya, hehehe, untuk membuat project baru di flutter bisa cek artikelnya di sini

3. Membuat class untuk data di listview builder

Diatas telah dijelaskan fungsi dari listview builder yaitu untuk menampilkan data yang dinamis dalam jumlah yang tidak tentu, untuk menampilkan data tentunya kita harus menyiapkan data dulu, disini kita akan menggunakan fungsi List di dart untuk membuat array datanya, contoh penggunaan List seperti dibawah ini

class Mylist{
  List data = [100, 20, 33, 49, "This is my data", "This is my listview builder"];
}

Penjelasan code diatas :

• class Mylist merupakan nama class yang kita buat dengan format Uppercase
• List data merupakan deklarasi list dengan nama data yang berisi 6 data yaitu [100, 20, 33, 49, “This is my data”, “This is my listview builder”], disini untuk type datanya saya pake dynamic.

Nahhhh kita sudah mempunyai 6 data yang akan kita tampilkan dengan listview builder nanti.

4. Membuat listview builder

Saatnya sekarang kita membuat listview buildernya, ketikan kode dibawah ini didalam body

body: ListView.builder(
                itemCount: Mylist().data.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                      leading: const Icon(Icons.list),
                      trailing: const Text(
                        "GFG",
                        style: TextStyle(color: Colors.green, fontSize: 15),
                      ),
                      title: Text(Mylist().data[index].toString()));
                  //title: Text("$index"));
                })

Penjelasan kode diatas :

• kita membuat listview buildernya dalam body
• itemCount: Mylist().data.length, berfungsi untuk mendapatkan jumlah data yang ada di class Mylist dengan nama variable “data”
• title: Text(Mylist().data[index].toString())); kode ini berfungsi menampilkan datanya disana tertulis toString() yang berfungsi merubah data type dynamic menjadi type Text

Jika berhasil maka akan tampil seperti gambar dibawah ini

5. Penutup

Demikian tutorial membuat listview builder di flutter dengan menggunakan bahasa pemograman dart, listview builder ini berguna dalam menampilkan data dari database ke dalam aplikasi mobile yang kita buat.