Bottom Navigation Bar

 

This type of navigation bar can be achieved without using any library.

BottomNavigationBar() Widget is already present in flutter. In Scaffold , we got a property named bottomNavigationBar. 

Make sure to change to type (type: BottomNavigationBarType.fixed)

This is a part of a code :

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  backgroundColor: Colors.pink,
  fixedColor: Colors.cyanAccent,
  currentIndex: 0,
items: [
  BottomNavigationBarItem(icon: Icon(Icons.home_outlined),label: 'Home'),
  BottomNavigationBarItem(icon:Icon(Icons.notifications_active_outlined),

label:'Notifications'),
  BottomNavigationBarItem(icon:Icon(Icons.event),label: 'calender'),
  BottomNavigationBarItem(icon:Icon(Icons.menu),label: 'More'),

Now The buttons will be visible but you will not be able to change the selected button . That means after press also the button will not be selected.

for that we have to update the currentIndex .

for that we will use ontap Function .We will declare a integer variable .let's say index.

Declare this variable before the @override .(many people do this mistake , if you declare this variable after override , then in every setstate(){} the variable will be initialized again and again. so make sure to declare it before ).

Now using ontap Function we will update the index variable and return that index value in currentIndex .

class _MyAppState extends State<MyApp> {
  int index=0;
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home:Scaffold(
        appBar:AppBar(....

.....

Now the ontap function

bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    backgroundColor: Colors.pink,
    fixedColor: Colors.cyanAccent,
    currentIndex: index,
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home_outlined),label: 'Home'),
    BottomNavigationBarItem(icon:Icon(Icons.notifications_active_outlined),
label:'Notifications'),
    BottomNavigationBarItem(icon:Icon(Icons.event),label: 'calender'),
    BottomNavigationBarItem(icon:Icon(Icons.menu),label: 'More'),

],
    onTap:(value) {
setState(){
index=value;
}
}