How can I remove label from bottom navigation bar in flutter so I can center horizontally my add button?

Question

can someone help me with this problem. The only solution i have currently found, is to set both showSelectedLabels and showUnselecedLabels to false. However this will remove all the labels, but i only want to remove the label of the add button. If I just use a placeholder "" for label, my add button is off centred horizontally...

button off centered horizontally

the result i want

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: tabs[_selectedIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        elevation: 10,
        backgroundColor: Colors.white,
        type: BottomNavigationBarType.fixed,
        selectedIconTheme: IconThemeData(color: kPrimaryMagentaColor),
        selectedLabelStyle: TextStyle(fontWeight: FontWeight.w500),
        selectedItemColor: Colors.black,
        showSelectedLabels: true,
        showUnselectedLabels: true,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Container(
              padding: kBottomNavIconLabelSpace,
              child: Icon(
                FeatherIcons.map,
                size: 26.5,
              ),
            ),
            label: 'Map',
          ),
          BottomNavigationBarItem(
            icon: Container(
              padding: kBottomNavIconLabelSpace,
              child: Icon(
                FeatherIcons.compass,
                size: 28,
              ),
            ),
            label: 'Discover',
          ),
          BottomNavigationBarItem(
            icon: Container(
              decoration: BoxDecoration(
                color: kPrimaryMagentaColor,
                shape: BoxShape.circle,
              ),
              padding: EdgeInsets.all(10),
              child: Icon(
                FeatherIcons.plus,
                color: Colors.white,
              ),
            ),
            label: "",
          ),
          BottomNavigationBarItem(
            icon: Container(
              padding: kBottomNavIconLabelSpace,
              child: Transform(
                alignment: Alignment.center,
                transform: Matrix4.rotationY(math.pi),
                child: Icon(
                  FeatherIcons.messageSquare,
                  size: 28,
                ),
              ),
            ),
            label: 'Inbox',
          ),
          BottomNavigationBarItem(
            icon: Container(
              padding: kBottomNavIconLabelSpace,
              child: Icon(
                FeatherIcons.calendar,
                size: 28,
              ),
            ),
            label: 'My Activity',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );

Solution 1

Ok, so this is kinda possible by manipulating the Text's fontSize.

First, change all the labels you have used for each of the BottomNavigationBarItem to use title parameter. Like this,

Change label: 'Map' to title: Text('Map'). Similarly change it with all your BottomNavigationBarItem. Since this is not possible using label parameter.

Now, for your center BottomNavigationBarItem use it like this,

BottomNavigationBarItem(
  icon: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      decoration: BoxDecoration(color: Colors.deepPurple, shape: BoxShape.circle),
      padding: EdgeInsets.all(14),
      child: Icon(Icons.add, color: Colors.white),
    ),
  ),
  title: Text("", style: TextStyle(fontSize: 0)),
),

So, you are changing two things.

1. Increase padding of your Container to EdgeInsets.all(14) to make the button look bigger.
2. Change fontSize using style: TextStyle(fontSize: 0), this make the view invisible.

Now, you have something like this, change the color to whatever you want.

Solution 2

Add this to the BottomNavigationBar properties

showSelectedLabels: false,
showUnselectedLabels: false,

Comments

[ellen100311]

Wow! thanks a lot! it worked, yeah the title and label thing also confused me a bit, but cheers!

[Nisanth Reddy]

No, thanks to you. Because of your question, I got to learn how to use a BottomNavigationBar. Glad to have helped :)

[Aldo]

Title is deprecated. Use this: stackoverflow.com/a/68604614/4249483

[Eray Hamurlu]

Good solution but text is deprecated for BottomNavigationBarItem. So you can use "showSelectedLabels: false", "showUnselectedLabels: false"