Flutter BottomNavigationBar not working with more than three items
I´ve a problem with the BottomNavigationBar in Flutter (0.6). As soon as I add more then three BottomNavigationBarItems as children, the buttons in the bar have white icons and they are messed up. When I use only three or less items, everything´s fine.
Here´s the widget code I use and which breaks the bar:
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
iconSize: 20.0,
items: [
BottomNavigationBarItem(
title: Text('Home'), icon: Icon(Icons.accessibility)),
BottomNavigationBarItem(
title: Text('Preise'), icon: Icon(Icons.account_box)),
BottomNavigationBarItem(
title: Text('Test'), icon: Icon(Icons.adb)),
BottomNavigationBarItem(
title: Text('Mehr'), icon: Icon(Icons.menu))
])
Has anybody an idea what´s wrong here?
Thanks in advance for any hint, Michael
For 4 or more items, set the type
to fixed.
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed, // This is all you need!
items: // ...,
)
From https://github.com/flutter/flutter/issues/13642#issuecomment-371875044
When more than 3 BottomNavigationBar items are provided the type, if unspecified, changes to
BottomNavigationBarType.shifting
per https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html. This bit of information should be highlighted in the class's doc. It's easy to overlook where it is (I overlooked it).When the BottomNavigationBar's type is
BottomNavigationBarType.shifting
the items text and icons are rendered in white, via DefaultTextStyle and IconTheme. It's assumed that theirBottomNavigationBarItem.backgroundColor
will be specified as a contrasting color. This is obviously confusing.The overall idea with
shifting
type bottom navigation bars is that each item will have a different background color (that contrasts with white), since that color will become the color of the entire navigation bar, when the item is selected.The doc for BottomNavigationBar, and NavigationBarItem needs to be improved.
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')),
],