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

Does the number of children of the PageView match the number of bottom navigation items? Please show more code in the question. — Richard Heap, Jun 11 '18 at 09:34
Share your code. It seems you are using something at index = 3, but you have only 3 items (index range = 0..2). So index = 3 is invalid — Phuc Tran, Jun 11 '18 at 10:08

score 54 · Answer 1 · answered Aug 19 '18 at 11:32

54

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.

answered Aug 19 '18 at 11:32

Bechitra

694
5
11

1

The provided link is broken, here is the current one - https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html – James Poulose Feb 18 '22 at 06:29

SilenceCodder · Answer 2 · 2021-09-27T07:39:29.597

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

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

2 Answers2