Bottom Navigation Bar is completely white, how to fix?

Question

My BottomNavigationBar is completely white. It works fine when there is 3 icons but when increased to 4, the Navbar goes completely white. The tabs can still be selected and changed.

This is the output of the console when the widget is run.

ic=null mNaviBarColor -15724014 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false

This is the build of the Navbar:

_bottomNavChildren[_currentIndex],
  bottomNavigationBar: BottomNavigationBar(
    onTap: onTabTapped,
    currentIndex: _currentIndex,
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        title: Text('Browse'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.message),
        title: Text('Messages'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person_outline),
        title: Text('Profile'),

And this is the List widget that points to the relevant indexed classes.

  int _currentIndex = 0;
  final List<Widget> _bottomNavChildren = [
    BrowsePage(),
    MessagesPage(),
    ProfilePage(),
  ];

Anyone know what the issue is? Thanks

Retouch

Answer 1

From flutters official documentation:

BottomNavigationBarType.fixed, the default when there are less than four items. The selected item is rendered with the selectedItemColor if it's non-null, otherwise the theme's ThemeData.primaryColor is used. If backgroundColor is null, The navigation bar's background color defaults to the Material background color, ThemeData.canvasColor (essentially opaque white).

BottomNavigationBarType.shifting, the default when there are four or more items. If selectedItemColor is null, all items are rendered in white. The navigation bar's background color is the same as the BottomNavigationBarItem.backgroundColor of the selected item. In this case it's assumed that each item will have a different background color and that background color will contrast well with white.

Thermophone

Right. Adding BottomNavigationBarType.fixed for the type solved it. Thanks. – Retouch