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
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
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
