Tutorial Membuat Toko Gaming UI Menggunakan Flutter | Chapter 04

Toko Gaming UI Chapter 04

Halo! Pada tutorial kali ini kita akan menambahkan kategori produk seperti pada gambar di atas. Salah satu tantangannya adalah membuat animasi perubahan agar ketika tombol ditekan, maka kategori yang dipilih akan berubah warna.

Sebelum itu, mari kita buat dulu model untuk produk. Model dibuat di dalam folder models dengan nama product_model.dart. Membuat model dapat dilakukan dengan menggunakan source code di bawah ini.

Bisa di lihat, di sana kita membuat list of categories dan juga list of products. Langkah selanjutnya adalah membuat ListView untuk menampilkan kategori. Pada folder widgets, buat folder baru dengan nama product_category_widget.dart. Gunakan source code di  bawah ini untuk membuat list category. Jangan lupa untuk menambahkan widget yang baru saja dibuat ke home screen.

Ada beberapa hal yang harus diperhatikan. Pada ListView di atas, kita mengganti scrollDirection menjadi horizontal agar scroll bisa dilakukan dari kiri ke kanan. Selain itu, ada juga GestureDectector, gunanya adalah untuk mendapatkan/menangkap click dari user.

Selain itu, jika diperhatikan, maka akan terlihat bahwa di sini kita menggunakan StatefullWidget, alasannya adalah agar kita bisa melakukan perubahan pada screen setiap kali user menekan product category. Perubahan ini dilakukan dengan menggunakan setState. Mengenai kondisi dari perubahannya, kita letakkan pada bagian BoxDecoration.

Jika program dijalankan, maka akan menjadi seperti ini:

Sekain tutorial kali ini, jika kalian ingin request mengenai Flutter, silahkan tulis di kolom komentar. Terima kasih.