Flutter BottomNavigationBar not working with more than three items

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)