Part 5 : Membangun Aplikasi Tiruan Grab dengan Flutter — Bottom Navigation

Akhirnya masuk ke bagian utama. Ternyata cukup sulit juga membuat sebuah tulisan. Kebetulan seri ini adalah tulisan pertama saya di Medium. Belajar menulis, tidak ada salahnya kan. Nantinya tulisan ini mungkin akan saya tambahkan ke web yang sedang saya coba buat bermodalkan VM dari provider tertentu dan melakukan konfigurasi sendiri. Lumayan juga kan nanti kalau dibuat tulisan bagaimana hosting web semacam wordpress/laravel pada virtual machine sendiri. Sembari menunggu flutter web juga. Terlebih ada banyak cloud provider yang menyediakan layanan free trial selama setahun, cukup untuk latihan.

Oke, kita kembali ke topik. Part 1–4 kita baru menyelesaikan bagian autentikasi aplikasi. Pada tulisan kali ini saya akan mencoba membuat halaman utama dari aplikasi tiruan Grab yang sebelumnya telah kita buat. Disini nanti akan memanfaatkan Bottom Navigation pada widget Scaffold. Jika teman-teman sebelumnya pernah mencoba bottom navigation pada Flutter, mungkin yang dari tutorial official Flutter, kali ini saya menggunakan cara yang sama namun dengan sedikit kostumisasi. Custom bottom navigation menggunakan Sliver karena satu fitur yang dimiliki aplikasi Grab, yaitu bottom navigationnya itu bisa hilang dan muncul berdasarkan posisi scroll halaman. Jadi dibutuhkan scroll controller. Saya baru mencoba metode yang nanti akan digunakan sih, belum sempat explore yang lain. Kalau ada, nanti boleh sharing juga atau minta pull request ke github saya agar kodenya semakin bagus.

Terakhir kita sudah membuat minimal code untuk halaman utama. Sekarang kita buat Bottom Navigationnya dengan menggunakan Sliver. Untuk iconnya menggunakan fontAwesome. Tambahkan Font Awesome pada dependency pubspec.yaml

dependencies:
   ...
   font_awesome_flutter: ^8.5.0

Kemudian untuk Bottom Navigationnya, gunakan kode berikut :

Jika icon yang muncul hanya tanda tanya dalam sebuah kotak, stop aplikasi dan jalankan kembali atau eksekusi perintah flutter clean pada command line.

unknown icon

Pada Bottom Navigation terdapat lima item. Ada baiknya untuk mengubah item tersebut menjadi custom widget sendiri, untuk menjaga kode agar tetap bisa terbaca dan tidak mengulangi kode yang sama. Pada container widget di dalam Row, klik kanan atau klik icon bohlam, kemudian pilih extract widget. Berikan nama custom widget, saya sendiri akan memberi nama GrabBottonNavigationItem.

Extract Widget

Akan terdapat sebuah stateless widget baru pada bagian bawah file dengan nama yang diberikan sebelumnya. Kita perlu melakukan kostumisasi pada constructor agar widget dapat menerima informasi dari luar.

Custom Widget

Tenang, saya tidak akan hanya memberikan foto potongan kode saja. Kode penuh akan saya berikan di akhir. Saya berikan screenshot hanya karena hal tersebut selesai dalam satu kali klik saja, bukan hasil ketik panjang. Tapi saya berharap teman-teman mencoba untuk mengetik satu-persatu juga di kode yang lain. Karena copy-paste saja tidak akan membuat menjadi handal.

Untuk kostumisasinya, kita perlu menerima IconData dan String title dari luar. Sebelum itu, ada baiknya custom widget yang telah dibuat kita pisahkan dari file screen. Buat folder baru bernama widgets di dalam folder lib. Kemudian buat file baru bernama grab_bottom_navigation_item.dart lalu cut dan paste GrabBottomNavigationItem ke file tersebut. Tambahkan import flutter material dan constant juga ke file tersebut.

Akan terdapat error pada main.dart, tambahkan import grab_bottom_navigation_item.dart, lalu berikan data yang diperlukan widget berupa icon dan title.

Lalu kita perlu menambahkan gesture detector untuk mendeteksi saat sebuat icon di tap oleh user. Selain itu, kita juga perlu menambahkan aksi pada saat icon tersebut di ketuk, yaitu mengganti jenis icon, merubah warna dan mengganti halaman. Tapi karena saya membutuhkan akses ke FontAwesome Pro, pergantiin jenis ikon saya terapkan pada home dan profile saja.

Jadi kita akan melakukan perubahan pada 2 file :

1. grab_bottom_navigation_item.dart

• Menambahkan gesture detector dan material — atau material dengan inkwell. Ini akan memberikan efek yang berbeda

• Menambahkan constructor untuk fungsi onTap gesture detector / inkwell

• Menambahkan boolean kondisi aktif

• Merubah warna icon saat aktif

• Mengganti jenis ikon saat aktif

Sehingga akhir dari grab_bottom_navigation_item.dart menjadi seperti berikut :

2. main_screen.dart

• Menambahkan ScrollController

• Menambahkan 5 halaman untuk masing-masing bottom navigation item.

• Melakukan perubahan pada bottom navigation item

Sehingga keseluruhan main_screen.dart menjadi seperti berikut :

Android View

Sebelum membuat Home Screen pada part berikutnya, saya akan menyederhanakan kode terlebih dahulu dengan membuat custom widget. Part setelah ini boleh dilewati karena akan tetap berjalan tanpa penyederhanaan ini. Teman-teman juga bisa belajar menyederhanakan widget tanpa membuka part setelah ini, yaitu part 6 karena di part 7 dan setelahnya saya akan menerapkan hal yang sama.

hamamulfz/grab_clone_flutter

Tulisan lain dalam seri ini :

Part 1 : Membangun Aplikasi Tiruan Grab dengan Flutter — Splash Screen

Part 6 : Membangun Aplikasi Tiruan Grab dengan Flutter — Penyederhanaan Widget (Optional)

Part 7 : Membangun Aplikasi Tiruan Grab dengan Flutter — Home Screen

Hamamul Fauzi - Medium