Flutter - 如何隐藏/删除 BottomNavigationBarItem 的标题

Question

so i have this flutter app, and i'm trying to hide or remove the title. I tried leaving the title as an empty string ie new Text("") but that messed with the alignment of the navbar.

Desired Outcome:

What i'm getting (if i leave the title as empty string):

:

Answer 1

There are two workarounds for this problem, as this feature is not yet implemented.

1. Pass Container(height: 0.0) instead of Text("")
2. Create widget and use it instead of Flutter's bottom navigation. Source .

Update:

Just add this to your BottomNavigationBar

showSelectedLabels: false,
showUnselectedLabels: false,

Answer 2

Now you can simply disable labels for selected or unselected items:

bottomNavigationBar: BottomNavigationBar(
  showSelectedLabels: false,   // <-- HERE
  showUnselectedLabels: false, // <-- AND HERE
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text('Personal')
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.notifications),
      title: Text('Notifications'),
    ),
  ]
  ...
)

...resulting in:

Answer 3

Hopefully, this snippet helps someone. It worked well for me.

bottomNavigationBar : new BottomNavigationBar(
      items: [
      BottomNavigationBarItem(
        icon: Icons.search,
        title: Padding(padding: EdgeInsets.all(0))
      ),
      BottomNavigationBarItem(
        icon: Icons.share,
        title: Padding(padding: EdgeInsets.all(0))
      ),
      BottomNavigationBarItem(
        icon: Icons.call,
        title: Padding(padding: EdgeInsets.all(0))
      )],
     type: BottomNavigationBarType.fixed
) 
//bottomNavBar

Answer 4

As of now, this feature is not implement. For a BottomNavigationBarItem , title is a required field

But you can build a new widget for this.

Try this :

Column buildButtonColumn(IconData icon) {
 Color color = Theme.of(context).primaryColor;

  return Column(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(icon, color: color),
    ],
  );
}

Widget buttonSection = Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      buildButtonColumn(Icons.call),
      buildButtonColumn(Icons.near_me),
      buildButtonColumn(Icons.share),
    ],
  ),
);

Answer 5

I have tried this approach and it works like charm:

BottomNavigationBarItem(
  icon: Icon(
    Icons.home,
    size: 40,
  ),
  title: Text(
    "",
    style: TextStyle(fontSize: 0),
  ),
)

Answer 6

It worked well for me.

BottomNavigationBarItem(
  icon: Icon(
    Icons.home,
  ),
  title: SizedBox.shrink(),
)

Answer 7

Use BottomAppBar to achieve this BottomNavigationBarItem without label. You could further customize it.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: body,
      bottomNavigationBar: new BottomAppBar(
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                  icon: Icon(Icons.home),
                  disabledColor: Colors.green,
                  onPressed: _currentIndex == 0
                      ? null
                      : () => setState(() => _currentIndex = 0)),
              IconButton(
                  icon: Icon(Icons.notifications),
                  disabledColor: Colors.green,
                  onPressed: _currentIndex == 1
                      ? null
                      : () => setState(() => _currentIndex = 1)),
              IconButton(
                  icon: Icon(Icons.settings),
                  disabledColor: Colors.green,
                  onPressed: _currentIndex == 2
                      ? null
                      : () => setState(() => _currentIndex = 2)),
            ],
          )
      ),
    );
  }

Hope it really helps.

Answer 8

In the new version of flutter, the title is depreciated, and we must provide the label. So, make the label an empty string

          BottomNavigationBarItem(
            label: '',
            icon: Icon(
              Icons.home_rounded,
              color: kHintColor,
              size: 35,
            ),
            activeIcon: Icon(
              Icons.home_rounded,
              color: kMainColor,
              size: 35,
            ),
          ),

and add the following to the BottomNavigationBar:

        selectedLabelStyle: TextStyle(fontSize: 0),
        unselectedLabelStyle: TextStyle(fontSize: 0),

Answer 9

title: Container(height: 0.0)

will give you some extra padding below. You can use

title: Text(
      '',
      style: TextStyle(fontWeight: FontWeight.bold, height: 0.0),
)

Answer 10

One can use bottom navigation bar type to shifting .

  bottomNavigationBar: BottomNavigationBar(
      type: BottomNavigationBarType.shifting,
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.star, color: Colors.red,), title: Text("")),
        BottomNavigationBarItem(icon: Icon(Icons.star, color: Colors.red,), title: Text(""))
      ]
  ),

Answer 11

To display icons without any labels, below step worked for me: Set selectedFontSize: 0 and set label to empty string. For example,

BottomNavigationBar(
      selectedFontSize: 0,
      items: BottomNavigationBarItem(
                icon: Icons.search
                label: '',
              ),
)