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')),
    ],

child: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.blueGrey,
            currentIndex: selectedIndex,
            onTap: onItemTap,
            // ignore: prefer_const_literals_to_create_immutables
            items: [
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.home,
                  ),
                  label: "Home"),
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.home,
                  ),
                  label: "Home"),
              BottomNavigationBarItem(
                  icon: Icon(Icons.upload), label: "Post"),
              // BottomNavigationBarItem(icon: Icon(Icons.layers), label: "Item"),
              BottomNavigationBarItem(
                  icon: Icon(Icons.person), label: "Accounts"),
            ],
          ),
        )),
)

set the type to fixed

// Create a Function First then call it like i call Dashbord()
// Change the icon according to your requirements



import 'package:flutter/material.dart';
import 'package:pedometer/widgets/const.dart';
import 'package:pedometer/widgets/const.dart';
import 'package:pedometer/widgets/const.dart';
import 'package:pedometer/widgets/icon.dart';

import 'dashbord.dart';

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
   DashbordScreen(),
  DashbordScreen(),
  DashbordScreen(),
  DashbordScreen(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
         backgroundColor: const Color.fromARGB(255, 6, 17, 93),
         type: BottomNavigationBarType.fixed,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
           // iconFun(path:Icons.home,context: context )
            icon: Icon(Icons.home,color: Colors.white,size: 35,),
            label: 'Home',
          //  backgroundColor: Colors.red,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.auto_graph_outlined,color: Colors.white,size: 35),
            label: 'Business',
            backgroundColor: Colors.green,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.health_and_safety,color: Colors.white,size: 35),
            label: 'School',
           // backgroundColor: Colors.purple,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings,color: Colors.white,size: 35),
            label: 'Settings',
         //   backgroundColor: Colors.pink,
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.white,
        onTap: _onItemTapped,
      ),
    );
  }
}