Flutter Widget : Cara Membuat Bottom Navigation Bar pada Flutter

Pernahkah anda melihat aplikasi yang memiliki tombol-tombol navigasi dibawahnya ? Jika ya maka itulah yang dimanakan Bottom Navigation Bar. Untuk membuat Bottom Navigation Bar, pada aplikasi flutter umumnya menggunakan bottomNavigationBar widget. Widget ini merupakan widget yang bersifat dinamis jadi baiknya menggunakan statefull widget. Dan karena untuk satu bottomNavigationBar dapat memiliki lebih dari satu widget maka widget ini juga dapat dikategorikan sebagai multiple children widget

Screen Shot 2020 08 09 at 18.07.07
Contoh Bottom Navigation Bar pada aplikasi Gojek

Cara Membuat Bottom Navigation Bar pada Flutter

Untuk membuat BottomNavigationBar seperti gambar diatas dapat menggunakan kode dibawah ini

Pada kode diatas dapat kita lihat bahwa terdapat properti items untuk menempatkan item widget, currentIndex untuk menentukan item mana yang sedang aktif lalu properti lainnya untuk warna dan memunculkan label.

Selanjutnya agar selected item menjadi dinamis (berubah saat di tap) maka kita perlu merubah nilai 0 pada currentIndex menjadi variable caranya:

Buat variable dengan tipe integer dengan nilai 0 sebagai default value.

int _selectedNavbar = 0;

lalu buat fungsi untuk memanggil fungsi setState yang berguna untuk mengupdate nilai _selectedNavbar

void _changeSelectedNavBar(int index) {
  setState(() {
    _selectedNavbar = index;
  });
}

setelah itu tambah property onTap dan isi valuenya dengan nama fungsi yang tadi kita buat. Jangan lupa rubah juga value currentIndex menjadi variable

...
showUnselectedLabels: true,
currentIndex: _selectedNavbar,
onTap: _changeSelectedNavBar,

Kode lengkapnya menjadi seperti dibawah ini

Bottom Navigation Bar pada Flutter

Kode diatas tentu hanya untuk contoh saja. Apabila ingin merubah ukuran icon, warna background, elavation dan lainnya kita dapat merubahnya pada properti value. Atau kita juga dapat merubahnya secara satu persatu melalui item widget.

Jika ingin membuat menu bottom navigasi bar dengan design yang unik berbeda dari biasanya bisa juga menggunakan package convex

sumber : https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

Default image
Omadi Jaya
Fullstack developer, Software Engineer @ Depok, Indonesia

Leave a Reply