Flutter - How to hide/remove title of BottomNavigationBarItem
DartFlutterDart Problem Overview
Dart Solutions
Solution 1 - Dart
There are two workarounds for this problem, as this feature is not yet implemented.
- Pass
Container(height: 0.0)
instead ofText("")
- Create widget and use it instead of Flutter's bottom navigation. Source.
Update:
Just add this to your BottomNavigationBar
showSelectedLabels: false,
showUnselectedLabels: false,
Solution 2 - Dart
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:
Solution 3 - Dart
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
Solution 4 - Dart
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),
],
),
);
Solution 5 - Dart
I have tried this approach and it works like charm:
BottomNavigationBarItem(
icon: Icon(
Icons.home,
size: 40,
),
title: Text(
"",
style: TextStyle(fontSize: 0),
),
)
Solution 6 - Dart
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),
Solution 7 - Dart
It worked well for me.
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: SizedBox.shrink(),
)
Solution 8 - Dart
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.
Solution 9 - Dart
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),
)
Solution 10 - Dart
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(""))
]
),
Solution 11 - Dart
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: '',
),
)