It's really weird. Adding more than 3 BottomNavigationBarItems changes the default icon and background colors of BottomNavigationBar to transparent.

Why is that?

P.S, everything works just fine with 2 or 3 items.

class BottomNavigationTabs extends StatelessWidget {
  const BottomNavigationTabs({Key? key, required this.child}) : super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: child,
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'Create'),
          BottomNavigationBarItem(
              icon: Icon(Icons.favorite), label: 'Favorite'),
          // BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'), // <-- uncomment transparent the whole bottomNavigationBar
        ],
      ),
    );
  }
}

CodePudding user response：

Set properties of BottomNavigationBar like

fixedColor: Colors.red, //Selected Icon color. Overrides primary Color

//TextStyles
showUnselectedLabels: true,
unselectedLabelStyle:
   const TextStyle(color: Colors.grey, fontWeight: FontWeight.bold),
selectedLabelStyle:
   const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),

//Icon
unselectedIconTheme: const IconThemeData(color: Colors.grey),
selectedIconTheme: IconThemeData(color: Colors.red),

CodePudding user response：

According to BottomNavigationBar documentation:

The bottom navigation bar's type changes how its items are displayed. If not specified, then it's automatically set to BottomNavigationBarType.fixed when there are less than four items, and BottomNavigationBarType.shifting otherwise.

...

BottomNavigationBarType.shifting, the default when there are four or more items. If selectedItemColor is null, all items are rendered in white.

Two solutions

1. The most simplest solution will be keeping the BottomNavigationBar type as fixed for more than three items.

type: BottomNavigationBarType.fixed.

2. The second solution, will be editing the selectedItemColor color.