Halo semuanya! Pada kesempatan kali ini kita akan melanjutkan tutorial sebelumnya. Jika kalian belum mengetahui referensi design yang digunakan, silakan lihat tutorial pertama.

 

Pada tutorial kali ini kita akan membuat icon category details screen. Sebelum itu, buka shop icon category widget, lalu spesifik pada onTap, buat menjadi seperti ini.

Code di atas berguna untuk berpindah halaman. Ketika icon category diklik, maka kita akan berpindah ke halaman icon category details screen.

 

Sebelum ke sana, mari kita buka folder models, lalu buat item model, seperti di bawah ini.

 

 

Kembali lagi pada icon category model pada folder models, buat menjadi seperti di bawah ini.

Sekarang, buka folder data, lalu ubah data.dart menjadi seperti di bawah ini. 

Bisa dilihat, pada icon category model, kita menambahkan items yang akan kita gunakan. Pada "Fruits" dan "Greens" terdapat list of item. Sedangkan pada icon category lain, kita biatkan kosong. Kalian bisa mengisinya jika kalian mau.

 

Nah, sekarang buka icon category details screen. Kemudian, buat menjadi seperti di bawah ini.

 

 

Mari kita bedah baris-baris code di atas. Pertama, terdapat row. Row ini untuk menampilkan header pada halaman yang sedang kita kerjakan.

Kedua, kita lakukan pengecekan pada icon category items. Jika items tidak kosong, maka kita tampilkan items tersebut dengan menggunakan gridview. Jika kosong, maka tampilkan pesan kosong.

Jadi apa itu gridview? Gridview adalah bentuk lain dari listview. Listview hanya satu arah, entah itu vertikal atau horizontal. Di sisi lain, jika kita menggunakan gridview, kita bisa membuat tampilan seperti Instagram.

Bingung? Langsung saja lihat hasil run program di bawah ini.

Hasil pertama adalah ketika icon category berisi items, sedangkan hasil kedua ketika icon category tidak berisi items.

Baik, sekian tutorial kali ini, semoga bermanfaat. Terima kasih.