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

Issue

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

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.

Answered By – Nisanth Reddy

Answer Checked By – Marilyn (FlutterFixes Volunteer)