(Bagian 3/3) : Membangun Landing Page Aplikasi GO-JEK dengan Flutter SDK
Pada post kali ini kita akan membuat bottom sheet dan progress loading bar sebelum aplikasi menampilkan data. Sebenarnya setelah menu Go Food masih ada menu promo, namun konsepnya sama dengan bagian sebelumnya yaitu memanfaatkan ListView untuk membangun UI-nya, sehingga tidak saya tulis di post ini, tapi nanti bisa lagsung kita lihat di repo github yang akan saya sertakan.
Membuat Bottom Sheet Modal
Pertama-tama kita akan membuat sebuah method bernama _buildMenuBottomSheet(). method tersebut berfungsi untuk menampilkan bottom sheet yang akan dipanggil ketika pengguna melakukan tap pada salah satu menu Gojek Service.
Kali ini kembali kita akan memanfaatkan GridView untuk membangun layout pada bottom sheet dialog tersebut, nah pada kode diatas kita juga kembali memanfaatkan method bernama _rowGojekService() yang sebelumnya sudah kita buat dan gunakan pada menu Gojek Services Menu.
Bottom sheet sudah disiapkan, yang perlu kita lakukan selanjutnya adalah memberikan action tap pada menu gojek. Anggap saja jika pengguna melakukan tap pada menu apapun akan muncul bottom sheet dialog tersebut.
Pada menu _rowGojekService() tambahkan action untuk membuka bottom sheet modal. Dikarenakan container utama Gojek Service tersebut berupa container dan tidak mempunya atribut onTap, maka caranya adalah dengan membungkus container utama gojek menu dengan gesture detector seperti berikut :
Pada gesture detector terdapat atribut onTap, dibagian tersebutlah kita memanggil bottom sheet modal yang sudah kita buat.
Membuat Progress Loading
Membuat Progress Loading ini akan sangat bermanfaat apabila aplikasi yang kita buat membutuhkan koneksi data ke server, sehingga ketika user menunggu akan muncuk progress dialog terlebih dahulu sebelum konten utama aplikasi muncul. Namun karena pada post kali ini kita tidak membutuhkan koneksi ke server sehingga kita akan melakukan simulasi seolah-olah aplikasi sedang menyiapkan data. Simulasinya yaitu dengan memberikan timer beberapa detik sebelum data ditampilkan.
Pertama-tama, pada method initState hapus seluruh method yang menginisiasi data Go Food, yaitu bagian ini :
_goFoodFeaturedList.add(new Food(title: "Steak Andakar", image: "assets/images/food_1.jpg"));Kemudian buat sebuah method bernama fetchFood() yang akan kita simulasikan sebagai request data ke server, method fetchFood() akan mengisi data Go Food Featured yang sebelumnya kita hapus pada method initState()
Pada method diatas kita akan kembali mengisi Go Food Featured dan mengambalikan nilainya tapi dengan delay 1 detik dengan memanfaatkan methode Future.delayed().
Kemudian pada method _buildGoFoodFeatured() wrap atau bungkus ListView yang sebelumnya sudah kita buat dengan FutureBuilder seperti berikut :
Future delayed akan menunggu kembalian dari method yang ada pada atribut future, pada atribut future kita masukan method fetchFood() yang sudah kita buat. Data yang dikembalikan oleh fetchFood akan masuk pada parameter snapshot, ketika snapshot belum memiliki data maka yang akan kita kembalikan pada tampilan antarmuka adalah sebuah CircularProgressIndicator, dan ketika snapshot memiliki data yang akan kita tampilkan adalah List View menu Go Food dengan data yang sudah didapatkan.
Kemudian jalankan kode.
Repository project dapat dilihat disini https://github.com/rizmaulana/flutter-gojek-landingpage/blob/master/README.md
