Flutter - How to hide/remove title of BottomNavigationBarItem - dart

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

Answer 1

There are two workarounds for this problem, as this feature is not yet implemented.
Pass Container(height: 0.0) instead of Text("")
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

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 5

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 6

I have tried this approach and it works like charm:
BottomNavigationBarItem(
icon: Icon(
Icons.home,
size: 40,
),
title: Text(
"",
style: TextStyle(fontSize: 0),
),
)

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

It worked well for me.
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: SizedBox.shrink(),
)

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