Tutorial Flutter Membuat Vegetable Market App UI Bahasa Indonesia #1

Referensi Design

Buat project Flutter seperti biasa, lalu install dependencies berikut ini:

Pada tutorial pertama ini, kita akan membuat bottom navigation terlebih dahulu. Di sini, kita akan menggunakan package bottom navy bar yang sudah kita install tadi. Buka home screen, lalu buat menjadi seperti ini.

Oke, kita mulai dari baris pertama. Di sini, kita meng-import file-file yang kita butuhkan. Kemudian, jangan lupa untuk mengubah stateless widget menjadi statefull widget.

Buat variable current index untuk menampung index saat ini. Index saat ini maksudnya adalah index dari halaman yang sedang kita pilih.

Ada juga page controller. Apa itu? Page controller adalah controller untuk mengontrol halaman yang sedang kita pilih nantinya. Entah itu home screen, favorite screen dan sebagainya.

Bisa di lihat, pada bagian body, terdapat children yang berupa list of widget. Nah, halaman yang akan kita lihat nantinya akan berubah sesuai dengan menu yang sedang kita pilih. Jika kita memilih home screen, maka akan tampil home screen. Begitu juga dengan halaman yang lain.

Nah, bagian yang paling penting nih, bottom navigation bar. Bottom navigation bar ini berguna untuk membuat navigasi yang biasa kita lihat pada aplikasi Android. Di sana terdapat home icon, favorite icon, shop icon dan bookmark icon. 

Kenapa ada empat? Karena halaman yang kita miliki memang ada empat, sesuai dengan design yang ada di atas.

Oke, langsung saja, jika program dijalankan, maka akan menjadi seperti ini.

Hasil