Halo! Pada tutorial kali ini kita akan melanjutkan tutorial sebelumnya. Di sini kita akan membuat discount list. Jika kalian belum tahu referensi design yang digunakan pada tutorial ini, silakan lihat tutorial pertama.

Oke, langsung saja. Buka file data.dart, lalu buat menjadi seperti ini.

Data di atas akan digunakan untuk membuat discount list pada halaman shop screen.

Oke, sekarang buka folder models dan buat discount model, seperti ini.

Nah, sekarang, kembali lagi ke halaman shop screen dan buat menjadi seperti ini.

Sekali lagi, di sini kita menggunakan listview untuk membuat discount list. Setiap container yang kita buat memiliki image decoration dengan opacity 0.5. Dari mana background image berasal? Tentu saja dari data yang sudah kita buat di discount list.

Pada referensi design, kita tahu terdapat dua item pada discount card, yaitu icon dan text. Jadi, di sini kita menggunakan row. Icon di kiri, text di kanan.

Semua icon atau gambar ada di folder images, jika kalian ingin mendapatkannya. Kalian dapat melakukan clone di project starter yang sudah saya siapkan di tutorial pertama.

Jika program dijalankan, maka akan tampil menjadi seperti ini.

Sekian tutorial kali ini, semoga bermanfaat. Terima kasih.