Flutter Bottom Navigation Bar Explained

Flutter Bottom Navigation Bar

Just like any other Bar in Flutter, Bottom Navigation Bar takes one important property.

√ BottomNavigationBar

It takes items property and items property take list of children. So any kind widget that has Bar keyword(like tabbar, tabbarview or sliverappbar), takes list of children.

It takes other few important property like

√ onTap

√ currentIndex

We use onTap property to change the index of the selected item and get selected. And then we pass this index to the currentIndex.

If you can not change the background color of the bottom navigation bar, see the video

The background color changes, if you have a fourth tab bar in the bottom navigation bar item. Flutter changes the background color to the default one if you add more than three tabs. The fourth tab creates shifting in position if you click on the tab bar item. To solve this you need to 

type:BottomNavigationBarType.fixed

If you get error like this 

'package:flutter/src/painting/text_painter.dart': Failed assertion: line 900 pos 12: '!_needsLayout': is not true.

You get this error if you have the below property settings for flutter bottom navigation bar 

   showSelectedLabels: false,
   showUnselectedLabels: false,

To over this issue, you can set another two properties

unselectedFontSize: 0.0,
selectedFontSize: 0.0,

Now the overall bottom navigation bar code should look like this

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        /*
        below two lines helps with the error of needs layout
         */
        unselectedFontSize: 0.0,
        selectedFontSize: 0.0,
        type:BottomNavigationBarType.fixed,
        backgroundColor: Colors.white,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.grey,
        elevation: 0,
        onTap: onTap,
        currentIndex: currentIndex,
        items: [
           BottomNavigationBarItem(title:Text("Home"),icon: Icon(Icons.apps)),
           BottomNavigationBarItem(title:Text("Bar"),icon: Icon(Icons.bar_chart)),

          BottomNavigationBarItem(title:Text("Search"),icon: Icon(Icons.search)),
          BottomNavigationBarItem(title:Text("Me"),icon: Icon(Icons.person))
      ],

      ),
    );
  }