Tutorial Membuat Toko Gaming UI Menggunakan Flutter | Chapter 02

Toko Gaming UI Chapter 02

Halo! Pada chapter kali ini kita akan membuat header seperti pada gambar di atas. Jika diperhatikan, header untuk halaman pertama dan kedua memiliki kesamaan pola, sehingga kita akan membuat sebuah widget khusus dengan nama custom_header_widget.

Berikut adalah source code untuk membuat custom header widget.

Di sini, kita menggunakan Custom Scroll View agar bisa melakukan scroll. Jika menggunakan Custom Scroll View, maka kita harus menggunakan slivers sebagai pengganti dari childrens.

Pada custom header widget, kita membuat dua buah parameter, yaitu leftWidget dan rightWidget. Tujuannya adalah agar bisa digunakan lagi di halaman kedua.

Jangan lupa untuk menambahkannya pada home screen. Jika program dijalankan, maka akan tampil seperti di bawah ini:

Custom Header Widget.

Sekian untuk tutorial kali ini, selanjutnya kita akan membuat custom search widget. Terima kasih.