[Solved] Flutter BottomNavigationBar not working with more than three items

Hello Guys How Are you all? Hope You all are fine. I am using the flutter bottom navigation bar and I have 3 items in my navigation bar and when I am adding 4th item in the navigation bar I am getting the error Flutter BottomNavigationBar not working with more than three items. Let’s Start This Article without wasting your time.

We are providing you all possible solutions to solve this error. let’s start this article without wasting your time.

How this Error occurs ?

I want to add 4 item in my BottomNavigationBar. When I am adding 3 item in my BottomNavigationBar Its Work Perfectly As You can See In below Screenshot.

Flutter BottomNavigationBar not working with more than three items, BottomNavigationBar not working with more than three items, Flutter BottomNavigationBar not working

then I am trying to add 4 items in my BottomNavigationBar the buttons in the bar have white icons and they are messed up. When I use only three or fewer items, everything´s fine. As You can see below Screenshot.

Flutter BottomNavigationBar not working with more than three items, BottomNavigationBar not working with more than three items, Flutter BottomNavigationBar not working

How to solve This Error ?

Question : How to solve Flutter BottomNavigationBar not working with more than three items ?
Answer : To solve this error BottomNavigationBar has property named type just Give type as BottomNavigationBarType.fixed to resolve this error. This type as fixed will give item to fixed size.

Solution 1 : set type as BottomNavigationBarType.fixed

To solve this error BottomNavigationBar has property named type just Give type as BottomNavigationBarType.fixed to resolve this error. This type as fixed will give item to fixed size.

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed, // This is all you need!
  items: // ...,
)

This Solution worked For me.

Solution 2 : Add type: BottomNavigationBarType.fixed on BottomNavigationBar

Add type: BottomNavigationBarType.fixed on BottomNavigationBar

bottomNavigationBar: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('A')),
      BottomNavigationBarItem(icon: Icon(Icons.access_alarm), title: Text('B')),
      BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('C')),
      BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('D')),
    ],

Summery

So it’s all About All possible solutions. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

Milan Dhameliya is an Information Technology Engineer. By profession, he is a Full Stack developer with knowledge of multiple back-end platforms (e.g., PHP, Node.js, Python) and frontend Flutter frameworks.

Leave a Comment