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'),
),
],
),
You can use type: BottomNavigationBarType.fixed, property of BottomNavigationBar and it will correct the behaviour of it. Sample code is as follow