121

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

What's wrong here?

4 Answers 4

247

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.

1
  • 1
    Setting 'showUnselectedLabels: true', will revert the Behaviour of BottomNavigationBar.shifting to the default behaviour of BottomNavigationBar.fixed. Basically, what you probably want to do. Mar 20, 2020 at 13:31
77

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

2
// 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,
      ),
    );
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.