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,
      ),
    );

score 16 · Answer 1 · answered Jul 31 '21 at 18:00

16

Add this to the BottomNavigationBar properties

showSelectedLabels: false,
showUnselectedLabels: false,

answered Jul 31 '21 at 18:00

leens witts

171
1
6

Is there no way to keep the outside labels and just remove the center one with the just the icon though? – Dennis Ashford Oct 21 '22 at 18:15
Hello @DennisAshford can you please make your question more clear – leens witts Jul 11 '23 at 11:16

score 2 · Answer 2 · answered Oct 27 '22 at 03:56

2

You need add in BottomNavigationBar():

BottomNavigationBar(iconSize: 40,
   showSelectedLabels: false, //selected item
   showUnselectedLabels: false, //unselected item
   ...
);

answered Oct 27 '22 at 03:56

Icaro Solon

21
1

score 0 · Accepted Answer · answered May 18 '21 at 16:26

0

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.

Increase padding of your Container to EdgeInsets.all(14) to make the button look bigger.
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 May 18 '21 at 16:26

Nisanth Reddy

5,967
1
11
29

Wow! thanks a lot! it worked, yeah the title and label thing also confused me a bit, but cheers! – ellen100311 May 18 '21 at 16:36
No, thanks to you. Because of your question, I got to learn how to use a `BottomNavigationBar`. Glad to have helped :) – Nisanth Reddy May 18 '21 at 16:43
Title is deprecated. Use this: https://stackoverflow.com/a/68604614/4249483 – Aldo Aug 09 '21 at 16:15
Good solution but text is deprecated for BottomNavigationBarItem. So you can use "showSelectedLabels: false", "showUnselectedLabels: false" – Eray Hamurlu Sep 03 '21 at 10:52
@ErayHamurlu it will hide all labels, but if you want to hide center label but visible other then what can you do? – Adnan haider Jul 25 '23 at 16:47

Vu Thanh · Answer 4 · 2021-09-22T14:09:11.877

0

If you use 2 params with

showSelectedLabels: false, showUnselectedLabels: false,

with label != ""

You can get this issue.

edited Sep 22 '21 at 14:09

answered Sep 22 '21 at 13:56

Vu Thanh

319
1
14

score 0 · Answer 5 · answered Aug 01 '23 at 02:42

    showSelectedLabels: false,**--> This solution**
    showUnselectedLabels: false, **--> This solution**
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(
          icon: Icon(Icons.library_books_sharp),
          label: '' **--> This solution**
      ),
      BottomNavigationBarItem(
          icon: Icon(Icons.account_tree_outlined),
          label: '' **--> This solution**
      ),
      BottomNavigationBarItem(icon: Icon(Icons.home_filled),
          label: '' **--> This solution**
      )
    ],

score -1 · Answer 6 · answered Aug 29 '22 at 10:18

-1

If you are using showSelectedLabels:true on BottomNavigationBar the icons doesnot be on center so try to avoid showSelectedLabels:true so remove showSelectedLabels:true

answered Aug 29 '22 at 10:18

Prawesh Panthi

110
4

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

6 Answers6