Tutorial Flutter Membuat Vegetable Market App UI Bahasa Indonesia #3

Tutorial Flutter Membuat Vegetable Market App UI Bahasa Indonesia #3


Halo! Pada tutorial kali ini, kita akan melanjutkan tutorial yang sebelumnya. Di sini kita akan membuat category icon list. Jika kalian belum mengetahui design yang dijadikan referensi, silakan lihat tutorial pertama.


Nah, pertama kita buat sebuah model terlebih dahulu. Di sini, saya memberikan nama icon category model. Buat model tersebut di dalam folder models.

Kemudian, buat sebuah folder dengan nama data pada folder lib. Kemudian, di dalam folder data, buat sebuah file dengan nama data.dart. Lalu, buat menjadi seperti ini.


Sekarang, kembali ke shop screen, buat menjadi seperti ini.



Nah, untuk membuat category list. Kita dapat menggunakan listview. Supaya scroll berubah menjadi kanan-kiri, maka kita bisa mengganti scroll direction-nya.

Kemudian, kita import category list yang sudah kita buat tadi, lalu melakukan perulangan dengan menggunakan map. Kenapa? karena listview hanya menerima child berupa list.

Perhatikan sizedbox yang kita buat di atas. Di situ kita melakukan pembagian. Total height-nya adalah 95.0. Kita membaginya menjadi tiga, satu untuk icon, satu untuk spasi dan satu lagi untuk text.

Jika program dijalankan, maka akan menjadi seperti ini.

Hasil

Sekian tutorial kali ini, semoga bermanfaat. Terima kasih.

Post a Comment

0 Comments