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

Oke langsung saja, di sini kita akan membuat list of dot untuk discount list yang sudah kita buat. Buka shop screen, lalu buat menjadi seperti ini.

Di sini, kita melakukan beberapa perubahan. Pertama, kita ubah shop screen menjadi stateful widget. Kemudian, kita buat variable current discount index. Apa ini? Ini adalah variable untuk menampung index discount yang sedang kita scroll.

Di bawahnya, kita buat sebuah fungsi untuk menciptakan array of widget. Array ini berisi sekumpulan dot atau titik yang nantinya akan merepresentasikan pilihan discount kita. Nah, di sini kita lakukan pengecekan. 

 

Hasil dari pengecekan itu akan membuat dot menjadi hijau jika discount card tersebut lah yang sedang kita lihat, sebaliknya. Jika tidak, maka akan berwarna abu-abu. Kalian pasti sudah sering melihatnya di aplikasi Android.

Penting untuk diketahui, di sini kita menggunakan visibility detector untuk mengetahui index dari discount card yang sedang kita lihat. Jika program dijalankan, maka akan menjadi seperti ini.

Sekian tutorial kali ini, semoga bermanfaat. Terima kasih.