Cara Menggunakan List View Builder di Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan yang berbahagia kali ini kita akan belajar bagaimana cara menggunakan list view builder pada flutter. Penasaran? Ayo ikuti selengkapnya di bawah ini.

Perbedaan ListView dan ListView Builder

Baik ListView atau ListView builder, keduanya sama-sama digunakan untuk membuat daftar atau list data yang dapat discroll. Tanpa menggunakan widget ini, sisa widget yang tidak terlihat di layar tidak dapat discroll ke bawah. Widget yang tidak terlihat atau kelebihan akan ditandai dengan peringatan bottom overload. Sedangkan perbedaannya:

ListView biasa digunakan untuk membuat data list statis atau data list yang tidak terlalu panjang. Karena jika menggunakan ListView untuk data yang terlalu besar, maka akan menurunkan performa aplikasi, alasannya karena semua data diload dalam satu waktu.

ListView Builder adalah solusi untuk menampilkan data yang besar tanpa menurunkan performa apliksi. Dengan menggunakan ListView builder, aplikasi hanya perlu menampilkan data yang tampak dilayar saja, sisanya akan ditampilkan saat layar di scroll ke bawah atau ke atas. ListView builder sama dengan recycler view pada androidstudio.

Cara Menggunakan ListView Builder di Flutter

Cara menggunakan ListView builder sangatlah mudah. Kita tidak perlu menjalankan perintah looping seperti for atau while, cukup memasukan itemcount dan mereturn widget yang ingin diulang. Selain implementasi ListView builder kita juga akan belajar cara menggunakan list tile.

1. Buatlah sebuah project flutter baru di visual studio code dengan menekan tombol ctrl + shift + P secara bersamaan. Lalu pilih Flutter: New Project → pilih folder(bebas) → dan beri nama project dengan list_view_builder.

2. buka file main.dart lalu ganti isinya dengan script yang ada di bawah ini. Untuk penjelasannya saya sertakan di dalam script dan di dalam tabel penjelas di bawah ini.

    

import 'package:flutter/material.dart';
    
void main() {
    runApp(const MyApp());
}
    
class MyApp extends StatefulWidget {
    const MyApp({Key? key}) : super(key: key);
    
    @override
    _MyAppState createState() => _MyAppState();
}
    
class _MyAppState extends State<MyApp> {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
    
        //menghilangkan debug label
        debugShowCheckedModeBanner: false,
        home: Scaffold(
    
            //membuat appbar dengan background putih dan membuat tulisan di tengah
            appBar: AppBar(
                backgroundColor: Colors.white,
                title: Center(
                    child: Text(
                        "Apk Berita",
                        style: TextStyle(
                            color: Colors.black38
                        ),
                    ),
                ),
            ),
            body: ListView.builder(
              // itemcount adalah total panjang data yang ingin ditampilkan
              itemCount: 20,
    
              // itembuilder adalah bentuk widget yang akan ditampilkan, wajib menggunakan 2 parameter.
              itemBuilder: (context, index){
    
                //padding digunakan untuk memberikan jarak bagian atas listtile agar tidak terlalu mepet
                //menggunakan edgeInsets.only untuk membuat jarak hanya pada bagian atas saja
                return Padding(
                  padding: const EdgeInsets.only(
                    top: 20, 
                  ),
    
                  //listtile adalah widget yang disediakan flutter berisi 3 properti yang kita pakai
                  //properti: leading, title, dan subtitle. di dalam setiap properti kalian bebas melakukan customisasi
                  child: ListTile(
                    leading: Image.network(
                      "https://cdn.pixabay.com/photo/2018/02/24/23/05/architecture-3179435_960_720.jpg", 
                    ),
                    title: Text(
                      "Lorem ipsum dolor sit amet, consectetur adipiscing elit", 
                      maxLines: 1, 
                      overflow: TextOverflow.ellipsis, 
                    ),
                    subtitle: Text(
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 
                      maxLines: 2, 
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                );
              }, 
            )
          ),
        );
      }
    }

3. Silahkan jalankan project kalian, jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Hasil Akhir

Tabel Penjelas

#	Syntax/Script	Keterangan
1	ListView.builder(…..);	Digunakan untuk membuat daftar atau list dengan jumlah data yang besar.
2	ItemCount: 20	Panjang data yang ingin ditampilkan
3	ItemBuilder: (context, index){…..}	Digunakan untuk membuat custom widget yang akan dilooping. Kalian bisa membuat card, text dsb.
4	ListTile(…..)	ListTile adalah salah satu widget praktis yang dapat kita gunakan untuk membuat daftar dengan mudah. Berisi leading, title, dan subtitle sebagai attribute yang sering digunakan. Contoh penggunaan ListTile adalah untuk membuat daftar kontak, atau daftar berita.
5	Image.network(…..)	Widget praktis untuk menampilkan gambar dari internet. Cukup dengan mengisi url gambar saja untuk menampilkannya di aplikasi
6	maxLines	MaxLines adalah salah satu attribute text yang digunakan untuk membatasi jumlah baris
7	Overflow: TextOverflow.ellipsis	Digunakan untuk memotong text jika sudah melebihi jumlah baris yang telah ditentukan.

Nah sekarang kalian sudah pahamkan gimana cara menggunakan ListView builder dan apa perbedaan ListView dan ListView builder. Tidak hanya itu, kaliann juga sudah belajar tentang widget list tile yang sangat membantu kalian untuk membuat list tanpa pusing mikirin layout.

Selanjutnya kalian bisa melakukan improvisasi dengan menambahkan data api pada ListView builder yang kalian buat. Bagaimana caranya? Ikuti tutorialnya di link berikut ini.

https://www.sahretech.com/2022/02/menggunakan-list-view-builder-get-data.html

Ok, sekian tutorial flutter dasar kali ini tentang cara menggunkan list view builder, semoga bermanfaat. Jika ada yang ingin ditanyakan silahkan tanyakan langsung di kolom komentar di bawah ini atau tanya langsung di fanspage sahretech. Sampai jumpa di tutorial flutter keren lainnya