Chrome Extension

BottomNavigationBar item position not correct if more than 3 items Flutter

I am using BottomNavigationBar in my flutter mobile app project to add tabs on the bottom which is working fine up to 3 BottomNavigationBarItem added. But when I add forth BottomNavigationBarItem the position of icons and text imbalanced. I am attaching the code that I am using.

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _selectedIndex,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('Tab 1'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.business),
      title: Text('Tab 2'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.school),
      title: Text('Tab 3'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.school),
      title: Text('Tab 4'),
    ),
  ],
),
1 Answers

You can use type: BottomNavigationBarType.fixed, property of BottomNavigationBar and it will correct the behaviour of it. Sample code is as follow

bottomNavigationBar: BottomNavigationBar(
  currentIndex: 0,
  type: BottomNavigationBarType.fixed,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('Tab 1'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.business),
      title: Text('Tab 2'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.school),
      title: Text('Tab 3'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.school),
      title: Text('Tab 4'),
    ),
  ],
),
Never leave your website again in search of code snippets by installing our chrome extension.