Flutter Bottom Navigation bar definitive guide

The Bottom Navigation bar is one of the main ways of navigation between different UI in Flutter application. Most of the users are used to interact with bottom navigation because most of the app available now using this widget to easy navigation between different screen.

In Flutter, you can set Bottom navigation bar inside the scaffold widget. Scaffold widget contains a property called bottomNavigation and you can set BottomNavigationBar widget for that.

But setting only the BottomNavigationBar will not show the navigation items. You must set BottomNavigationItems for Items property. It accepts List of BottomNavigationItems Widgets. 

When adding Items to the Bottom Navigation bar please remember following things.

  1. It doesn’t mention the maximum number of widgets should be in the bottom navigation, but as a good practice, it better to keep it between 2 to 5.
  2. Even though it doesn’t mention a maximum no of BottomNavigationItems widgets, it must have at least 2 BottomNavigationItems. Otherwise, it will throw an error.
  3. icon and title properties are required and you must set relevant widgets to those. 
  4. You can also specify a different icon to the active state by setting widget to activeIcon property. But this is optional.

Next thing is to change the state when onTap trigger. onTap return index of the pressed item and you can set the current index value by using that to rebuild the widget. Also, remember to set currentIndex property as well. It represents the currently active position.

    
    int _currentNav = 0;
        
    return Scaffold(
      
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentNav,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
             icon: Icon(Icons.home,color: Colors.red,),
             title: Text("Home"),

          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category,color: Colors.red),
            title: Text("Shop"),
            
          )
        ],
        onTap: (index){
          setState(() {
            _currentNav =  index;
          });
        },
      ),
    )
    

Type property in Bottom Navigation bar

When you set up a navigation bar it behaves in two different way. Those are Fixed and Shifting.

As default the type set as fixed and If you change that to shifting you will see a kind of Icon move animation when you click a button. Based on by though I felt like this shifting is kind of messy currently and better to keep fixed right at the moment.

    
        type: BottomNavigationBarType.fixed,
    

Remove text in bottom navigation bar

Removing text from the bottom navigation bar is a really easy one. You just need to set showSelectedLabels and showUnSelectedLabels to false.

    
        showSelectedLabels: false,
        showUnselectedLabels: false,
    

Change height of bottom navigation bar

There is no straight forward way to set the height of the bottom navigation. But there is a workaround. 

You may know when you wrap widget inside the SizedBox, the child widget inherit the height from the Sizedbox. Therefore you can wrap the BottomNavigationBar inside the Sizedbox and set a height for Sizedbox

    
    Scaffold(
      bottomNavigationBar: SizedBox(
        height: 200,
        child: BottomNavigationBar()
        )
    )
    

Change background color of bottom navigation bar

You can change the bottom navigation bar background colour by setting background color property. But there is an important thing to remember. You must set type as a fixed to change the background using this property.

    
    BottomNavigationBar(
          
          backgroundColor: Colors.green,
          type: BottomNavigationBarType.fixed,
        );
    
flutter bottomnavigationbar background color

If you are using shifting as a type, backgroundColor in BottomNavigationBarItem widget will override this colour.

    
    BottomNavigationBar(
          currentIndex: _cIndex,
          backgroundColor: Colors.green,
          type: BottomNavigationBarType.shifting,
          items: [
            BottomNavigationBarItem(
                icon:Icon(Icons.map, color: Color.fromARGB(255, 255, 255, 255)),
                title: new Text(''),
                backgroundColor: Colors.red),
            BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit,color: Color.fromARGB(255, 255, 255, 255)),
                title: new Text(''),
                backgroundColor: Colors.blue),
            BottomNavigationBarItem(
                icon:Icon(Icons.home, color: Color.fromARGB(255, 255, 255, 255)),
                title: new Text(''),
                backgroundColor: Colors.amber),
          ],
        )
    
flutter bottomnavigationbar background color

Plugins for Implement custom Navigation bar

Flutter custom navigation
Flutter custom navigation
Flutter custom navigation
Flutter custom navigation
Flutter custom navigation
Flutter custom navigation

Conclusion

I hope you get an idea about how to Bottom navigation bar and how to customize as you need. If you have any questions feel free to add a comment below 

@mightytechno

Follow me in Instagram.

@mighty_techno
You Need To Know
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

x