Flutter - How to hide/remove title of BottomNaviga

问题:

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 i.e. 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):

:

回答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,

回答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:

回答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

回答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),
    ],
  ),
);

回答5:

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(""))
      ]
  ),

回答6:

I have tried this approach and it works like charm:

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

回答7:

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

回答8:

It worked well for me.

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