CODEWITHSUNDEEP
flutternavigationbarflutter-bottomnavigation
ellen100311
ellen100311

Reputation: 97

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

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

Upvotes: 6

Views: 13279

Answers (6)

hgiahuyy
hgiahuyy

Reputation: 308

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

Upvotes: 0

Icaro Solon
Icaro Solon

Reputation: 21

You need add in BottomNavigationBar():

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

Upvotes: 2

Prawesh Panthi
Prawesh Panthi

Reputation: 368

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

Upvotes: -1

Vu Thanh
Vu Thanh

Reputation: 398

If you use 2 params with

showSelectedLabels: false, showUnselectedLabels: false,

with label != ""

You can get this issue.

Upvotes: 0

leens witts
leens witts

Reputation: 231

Add this to the BottomNavigationBar properties

showSelectedLabels: false,
showUnselectedLabels: false,

Upvotes: 21

Nisanth Reddy
Nisanth Reddy

Reputation: 6430

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.

enter image description here

Upvotes: 0

Related Questions