(Bagian 2/3) : Membangun Landing Page Aplikasi GO-JEK dengan Flutter SDK
Pada artikel bagian 1 kita sudah membagi halaman landing page menjadi 4 bagian, yaitu App Bar, Gopay Menu, Gojek Menu, Go Food Menu dan bagian lain yaitu list untuk promo yang berada pada bagian bawah Go Food Menu.
Bagian pertama yaitu App Bar sudah dijelaskan pada artikel sebelumnya, maka selaanjutnya adalah bagian Gopay Menu.
2. GoPay Menu
Pertama-tama copy terlebih dahulu asset untuk menu transfer, scan qr, isi saldo dan lainnya, asset dapat diunduh disini
Pada directory assets buat directory baru bernama icons kemudian copy icon-icon tersebut ke directory icons. Selanjutnya jangan lupa untuk mendaftarkan asset icon tersebut ke pubspec.yaml sesuai dengan nama filenya
Kemudian kembali ke halaman beranda_view.dart buat sebuah methode _buildGopayMenu() untuk memisahkan tampilan untuk gopay menu sehingga lebih mudah dicari.
Pada bagian ini kita akan belajar bagaimana membuat sebuah gradien pada container, untuk membuat sebuah gradien dibutuhkan sebuah container, kemudian pada container tersebut ditambahkan property gradien seperti berikut :
decoration: new BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [const Color(0xff3164bd), const Color(0xff295cb5)], ),bagian begin menyatakan darimana gradien dimulai, pada case kita adalah topCenter dan berakhir (end) pada bottomCenter. Selain begin dan end juga terdapat center, atau bagian tengah gradien jika ingin ditambahkan.
Kemudian method _buildGopayMenu() panggil pada method build() pada bagian body.
Kemudian jalankan / debug code yang sudah kita buat.
Catatan : Apabila terdapat error asset not found ketika aplikasi dijalankan, pastikan path asset yang sudah didaftarkan di pubspec.yaml sudah benar. Jika sudah dipastikan benar tapi masih error maka uninstall terlebih dahulu aplikasi kemudian jalankan lagi.
3. Membuat GoJek Menu
Pada bagian Gojek Menu kita tidak akan menambahkan asset baru pada project yang kita buat, kita akan memanfaatkan icon-icon generic material design yang sudah disediakan oleh flutter.
Pertama-tama buat method _buildGojekServicesMenu() seperti pada Gopay Menu, ini dimaksudkan untuk memudahkan pencarian bagian view yang kita buat.
Pada bagian ini kita akan membuat GridView dengan menggunakan GridView builder, itemCount menandakan berapa banyak jumlah yang akan ditampilkan oleh GridView, kemudian gridDelegate menggunakan SliverGridDelegateWithFixedCrossAxisCount dengan crossAxisCount 4 yang menandakan grid tersebut mempunyai empat column.
Kemudian tambahkan method _buildGojekServicesMenu() ke method build() tepat dibawah _buildGopayMenu() yang sudah kita buat sebelumnya, kemudian jalankan.
Jika tampilan yang dihasilkan seperti diatas berarti kita sudah berhasil membuat menu dengan gridview. Karena pada bagian itemBuilder kita hanya memberikan balikan sebuah text “Gojek Menu” dimana text tersebut akan kita ubah menjadi grid yang dinamis dengan tampilan icon dan text sesuai dengan tampilan pada GOJEK.
Untuk membuat list atau grid yang dinamis maka kita harus membuat sebuah model/entity/object untuk menampung nama menu dan icon apa yang akan ditampilkan pada masing-masing grid yang sudah disediakan.
Untuk membuat sebuah model menu maka kita akan membuat sebuah file bernama beranda_model.dart pada direktori beranda.
Kembali ke beranda_view.dart buat sebuah list dengan tipe data GojekService beranama _gojekServiceList pada class _BerandaPageState, kemudian overide initState dan isikan list _gojekServiceList sesuai dengan menu yang akan ditampilkan.
Selanjutnya buat row yang akan kita gunakan sebagai item dari grid yang sudah disediakan. Buat method _rowGojekService(GojekService gojekService) dengan paramater GojekService sehingga masing-masing item grid mempunyai icon dan text yang berbeda sesuai dengan model yang sudah kita inisiasi pada method initState.
Pada bagian properti warna (gojekService.color) dan icon data (gojekService.image) pada widget Icon akan mengambil dari data GojekService yang kita jadikan sebagai parameter, begitu juga dengan properti Text (gojekService.title).
Setelah itu pada itemBuilder _buildGojekServicesMenu() diubah menjadi
itemBuilder: (context, position) {
return _rowGojekService(_gojekServiceList[position]);
})));Kemudian jalankan code.
4. Membuat GoFood Menu
Sebelum membuat GoFood menu silahkan download asset untuk menu GoFood disini
Untuk membuat menu GoFood maka kita akan membuat method baru untuk memisahkan componen view menu GoFood dari componen utama view beranda seperti halnya pada menu GoPay dan GoJek. Buat method bernama _buildGoFoodFeatured(). Tetapi sebelum membuat method tersebut kita akan membuat model terlebih dahulu untuk menampung item pada menu Go Food Featured seperti halnya pada bagian menu Go Jek.
Tambahkan class Food pada beranda_model.dart tepat di bawah class Gojek Services. Kemudian buat sebuah list bernama _goFoodFeaturedList untuk menampung item pada Go Food menu.
Kemudian buat method _buildGoFoodFeatured()
Pada bagian ini, kita akan membuat sebuah list yang dapat di scrool secara horizontal. Membuat horizontal list cukup dengan menambahkan scrollDirection : Axis.horizontal sebagai atribut dari List View
Untuk method _rowGoFoodFeatured() adalah sebagai berikut :
Kemudian tambahkan method _buildGoFoodFeatured() pada method utama untuk tampilan yaitu method build()
Kemudian jalankan code
Section untuk Go Food sudah berhasil dibuat dengan memanfaatkan horizontal listview.
Untuk part selanjutnya kita akan membuat bottom sheet dan progress bar yang akan membuat seolah-olah aplikasi sedang menyiapkan data dari server.
Untuk bagian 2 cukup sampai disini, apabila ada kesulitan, masukan dan saran bisa di tulis di kolom komentar :)
Tulisan Lain :
