Tutorial Flutter Membuat Vegetable Market App UI Bahasa Indonesia #2
Halo! Pada tutorial ke dua ini, kita akan membuat header pada aplikasi kita. Header ini, berisi profile icon dan icon button. Jika kalian belum paham, silakan lihat tutorial pertama terlebih dahulu, di sana sudah ada design yang akan kita gunakan.
Oke, langsung saja. Buka shop screen, lalau buat menjadi seperti ini.
Pada source code di atas, kita menggunakan single child scroll view. Apa kegunaannya? Gunanya adalah untuk membuat scroll. Jika kita hanya menggunakan column. Maka screen tidak dapat di-scroll, jadi kita membutuhkan single child scroll view ini.
Kemudian, kita menggunakan row untuk menampung profile icon dan icon button. Kemudian, kita pisahkan keduanya dengan menggunakan main axis alignment.
Untuk membuat profile berbentuk lingkaran, kita bisa menggunakan circle avatar. Lalu, menambahkan background image, seperti yang kita lakukan di atas.
Pada bagian icon button, kita gunakan sebuah row lagi. Tujuannya adalah untuk mengelompokkan keduanya. Ada dua icon button yang kita buat, yaitu notifikasi dan search.
Jika program dijalankan, maka akan menjadi seperti ini.
 |
| Hasil |
Baik, sekian tutorial kali ini, semoga bermanfaat. Terima kasih.
0 Comments