Flutter BottomNavigationBar with more than 3 items automatically applies padding depending on the selected item
443
Set bottomNavigationBarType: to fixed. By default on four or more items, it's shifting. This will highlight the selected item by making it more distinct.
Author by
PhiJoTo
Updated on December 02, 2022Comments
-
PhiJoTo over 1 year
In my App there is an BottomNavigationBar with, at the moment, 4 items. The code of it is following:
bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem(icon: Icon(Icons.home), label: "Startseite"), BottomNavigationBarItem(icon: Icon(Icons.star), label: "Favoriten"), BottomNavigationBarItem(icon: Icon(Icons.casino), label: "Quiz"), BottomNavigationBarItem(icon: Icon(Icons.map), label: "Karte"), ], currentIndex: _selectedIndex, unselectedItemColor: Colors.grey, showUnselectedLabels: true, selectedItemColor: Colors.blue, onTap: _onItemTapped, ),
_selectedIndex is just an integer. The _onItemTapped function:
void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); setState(() { if (index == 0) { SwipePage(); } else if (index == 1) { DatabaseProvider.db.queryDb(); Navigator.of(context).push( toFavouritesPage(), ); } else if (index == 2) { Navigator.of(context).push( toQuizPage(), ); } else if (index == 3) { Navigator.of(context).push( toMapsPage(), ); } }); }
With 3 items it looks like this (everything evenly spaced):
With 4 items it looks like this (I dont understand where this padding comes from):
How do I get rid of the padding so that everything stays evenly spaced?