Kali ini saya akan membahas suatu Widget untuk membuat sebuah tampilan secara dinamis. Bisa diketahui untuk membuat sebuah Item dengan bentuk layout berupa ListView dan GridView di dalam layout tersebut akan diberikan sebuah item, kemudian item tersebut memiliki model penggunaan Widget yang sama yang artinya kita men-copy paste Widget yang sama berulang kali maka dari itu hal tersebut membuat developer aplikasi merasa tidak efisien dan menyusahkan.
Nah, untuk pembahasan kali ini kita akan mengenal Widget Dynamic Layout .
ListView.builder
Sebuah Widget ListView memiliki sebuah builder yang artinya berapa jumlah model Widget yang sama dapat kita buat hanya dengan 1 model tanpa perlu kita copy-paste berulang-ulang. Intinya kita bisa mengatur jumlah layout yang ingin kita buat.
Untuk property yang sering dipakai pada ListView.builder ini antara lain:
- itemCount, property ini digunakan untuk memberikan jumlah item yang akan dibuat berapa banyak
- itemBuilder, property ini digunakan untuk membuat item yang akan dibuat di dalamnya yaitu berupa Widget
Untuk lebih jelasnya dapat dilihat pada contoh berikut:
Dapat dilihat di dalam property itemBuilder tepatnya di dalam yang ada di dalam kurung pertama harus membuat BuildContext kemudian kita beri namanya context, lalu yang kedua int index maksudnya kita membuat sebuah variabel bertype int dengan nama index.
Untuk int index ini berguna untuk me-looping / me-load data yang disusun dengan menggunakan array, lebih jelasnya dapat dilihat pada contoh berikut:
Lalu, kenapa terdapat error pada emulator setelah kita debug. Okay, di dalam itemBuilder tidak ada yang salah kita sudah berhasil me-load data pada variabel nama, lalu dimanakah letak kesalahannya ???
Sekarang coba perhatikan property itemCount, di dalamnya kita beri nilai 10 yang artinya dia akan membuat atau build sebanyak 10 kali sedangkan di dalam variabel nama yang merupakan sebuah array di dalamnya hanya memiliki 4 data, maka dari itu caranya adalah sebagai berikut:
Mudah bukan penerapannya 😋
Lanjut ke Widget berikutnya,
GridView
Sebelumnya kita belum membahas Widget ini, sekarang mari kita bahas Widget GridView terlebih dahulu. GridView digunakan untuk membuat sebuah layout yang bermodelkan sebuah grid atau yang biasa kita lihat seperti layout kotak-kotak seperti layout pada gallery teman-teman.
Untuk property yang sering dipakai yaitu:
- children<Widget>[], untuk menampung banyak Widget di dalamnya
- gridDelegate, property ini nantinya biasanya akan disambungkan dengan Widget SliverGridDelegateWithFixedCrossAxisCount untuk memberikan jumlah kolom grid dan juga jarak antar grid
Untuk lebih jelasnya bisa dilihat di bawah ini:
Namun, GridView dapat dibuat langsung seperti ini sesuai dengan dokumentasi di website resmi flutter yaitu dengan menggunakan Construct GridView.count.
GridView.count
Dengan menggunakan Construct ini kita dapat langsung membuat sebuah grid tanpa perlu kita men-delegate sebuah SliverGridDelegateWithFixedCrossAxisCount untuk mengatur jarak dan jumlah kolom. Jadinya, kita bisa langsung menggunakan property untuk mengatur jumlah kolom grid.
Contoh penggunaan:
Kemudian untuk membuat sebuah grid yang dinamis maka digunakan sebuah Construct Widget GridView.builder.
GridView.builder
Merupakan sebuah Construct untuk membuat sebuah grid yang dinamis dengan property yang sama dengan Widget Construct ListView.builder hanya saja pada Construct GridView.builder ini terdapat property khusus seperti:
- gridDelegate, yang di dalamnya menggunakan Widget SliverGridDelegateWithFixedCrossAxisCount untuk menentukan jumlah kolom dan ukuran grid
Contoh penerapan:
Semoga apa yang telah dibahas dapat tersampaikan dan bermanfaat, terimakasih. 😉
