How to display more than 3 items in a BottomNavigationBar while coding in flutter How to display more than 3 items in a BottomNavigationBar while coding in flutter flutter flutter

How to display more than 3 items in a BottomNavigationBar while coding in flutter


Just writing it for the future query regarding on this issue.

Just add a extra parameter in your BottomNavigationBar Constructor -

type : BottomNavigationBarType.fixed

Check also the Flutter Official Ref.

Optional : Restart your app from start for fixing rendering issue.


It's because the default NavigatioBar doesn't support more than 3 items, Use this parameter inside your BottomNavigationBar widget:type: BottomNavigationBarType.fixed

OR Copy and Paste this code below

    bottomNavigationBar: BottomNavigationBar(     type: BottomNavigationBarType.fixed, ///This allow more than 3 items     backgroundColor: Theme.Colors.primaryDarkColor,    currentIndex: 1,     items: [    BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up,), title: Text("GLO",     style: TextStyle(color: Colors.black),),),    BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title:     Text("MTN"),),    BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title:     Text("Airtel"),),    BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title:     Text("9mobile"),),     ],  ),