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

Question

I tried adding 5 BottomNavigationBarItem but, the compiler throws an error if I try to add more than 3 items. It looks something like this:

 The following RangeError was thrown building BottomNavigationBar(dirty, state:
_BottomNavigationBarState#a56dd(tickers: tracking 3 tickers)):
 RangeError (index): Invalid value: Not in range 0..2, inclusive: 3

I need to display 5 items in the BottomNavigationBar. Help me out on this one.

BottomNavigationBar missing

there is the link to the code and, currently there are just three items in there, I wanna add two more items without the compiler throwing error message

Answer 1

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.

Answer 2

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"),),
     ],
  ),