Do you how to force Flutter BottomNavigationBar to have same width on all the TABS?

Question

This is my code, but I haven't found how to force all the items to have the same width on the web. The main issue is that in flutter, this widget distributes width and assign a larger amount of space to the selected tab but I need for design purposes to force all the items to have the same amount of space.

Extra doubt, My selected tab is not changing its color even it's configured to do so

BottomNavigationBar(
            showUnselectedLabels: true,
            backgroundColor: Color(0xff22273d).withOpacity(.4),
            selectedItemColor: Color(0xffffd156),
            selectedIconTheme: IconThemeData(
              color: Color(0xffffd156),
            ),
            selectedLabelStyle: GoogleFonts.openSans(color: Color(0xffffd156)),
            currentIndex: _currentIndex,
            onTap: (int index) {
              setState(() {

                _currentIndex = index;
                print("Current index"+_currentIndex.toString());
              });
            },
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home, color: Color(0xff99ffffff),),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("Home", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)
              ),
              BottomNavigationBarItem(
                  icon: ImageIcon(AssetImage("images/soccer_24_px.png"), color: Colors.white,),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("La porra", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.calendar_today, color: Color(0xff99ffffff),),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("Calendario", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)
              ),
              BottomNavigationBarItem(
                  icon: ImageIcon(AssetImage("images/classification_24_px.png"), color: Color(0xff99ffffff),),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("Clasificacion", style: GoogleFonts.openSans(fontSize: 10, color:Colors.white),)
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.more_horiz, color: Color(0xff99ffffff),),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("Más", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)
              ),
            ]
          )```

user_11618112 · Answer

Answer to the width. Try to add in BottomNavigationBar

type: BottomNavigationBarType.fixed,

That should make all the width same... I didn't try it in web though so let me know if it works.

Answer to your extra doubt is that you have overwritten selected color with Icon and AssetImages color. Remove all color property in your Icons and asset images located in all BottomNavigationBarItem and set

unselectedItemColor: Color(0xff99ffffff),

in BottomNavigationBar and it should work. Also make sure you have your _currentIndex located above state class like this

...
int _currentIndex = 0;

class _YourScreenState extends State {
@override
...

and last think background color in BottomNavigationBarItem doesn't work when BottomNavigationBarType is set to fixed so you can delete them all as well

OUTPUT

Do you how to force Flutter BottomNavigationBar to have same width on all the TABS?

1 Answers