How to make Bottom Navigation Bar in Flutter

August 29, 2021

Hello Folks! Pada kali ini kita akan mempelajari gimana sih cara membuat Bottom Navigation Bar di Flutter. Sebelumnya udah pada tau kan apa itu Bottom Navigation Bar?

Jadi Bottom Navigation Bar adalah adalah Widget yang terdapat pada bagian bawah aplikasi yang digunakan untuk berpindah dari halaman satu ke yang lainnya. Biasanya Widget ini terdiri dari tiga sampai dengan lima komponen yang mana jika di klik akan membawa kita ke halaman laninnya. Selain itu untuk tampilan, Bottom Navigation Bar terdiri dari beberapa mode yaitu dalam bentuk label teks, icon, atau keduanya. Nah, udah pada tau kan, mari kita lanjut cara membuat Bottom Navigation Bar.

Pertama-tama

tambahkan code berikut pada file bottombar_menu.dart

import ‘package:flutter/material.dart’;
import ‘package:flutter_tutorial/NavigationMenu/page_widget.dart’;

class PageHomeBottomMenu extends StatefulWidget {
@override
_PageHomeBottomMenuState createState() => _PageHomeBottomMenuState();
}

class _PageHomeBottomMenuState extends State<PageHomeBottomMenu> {
int currentIndex = 0;

final List<Widget> _listColorMenu = [
PageWidget(Colors.brown),
PageWidget(Colors.orangeAccent),
PageWidget(Colors.white12)
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Page Bottom Bar’, style: TextStyle(color: Colors.black),),
backgroundColor: Colors.white,
),

body: _listColorMenu[currentIndex],

bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
backgroundColor: Colors.white,
currentIndex: currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home,color: Colors.black,),
title: Text(‘Home’)
),

BottomNavigationBarItem(
icon: Icon(Icons.message,color: Colors.black),
title: Text(‘Message’)
),

BottomNavigationBarItem(
icon: Icon(Icons.person,color: Colors.white,),
title: Text(‘Person’)
)
],
),
);
}

void onTabTapped(int index) {
setState(() {
currentIndex = index;
});
}
}

Dapat kita lihat pada code diatas terdapat list yang mana list tersebut lah yang merupakan halaman-halaman yang akan ditampilkan. pada praktek kali ini kita menggunakan container saja terlebih dahulu, teman-teman bisa mengembangkannya menjadi halaman-halaman atau page aplikasi sesuai yang diinginkan. Setelah membuat List selanjutnya kita widget Bottom NavigationBar beserta item dan pada body kita panggil list yang kita tambahkan tadi. lalu deklarasikan pada properti currentIndex yang ada pada BottomNavigationBar. Dan jangan lupa untuk menambahkan method onTabTapped.

Lalu untuk berpindah halaman ketika diklik kita dapat membuat file baru dan setelah itu dipanggil atau di deklarasikan pada homepage diatas. karena praktik kali ini kita hanya akan menggunakan satu file saja dan ketika berpindah halaman hanya akan menampilkan perbedaan warna pada container. Berikut kodingan untuk file page_widget.dart

import ‘package:flutter/material.dart’;

class PageWidget extends StatelessWidget {
final Color color;

PageWidget(this.color);

@override
Widget build(BuildContext context) {
return Container(
color: color,
);
}
}

Output:

OK, Sekian tutorial kali ini, Semoga dapat membantu ^.^