How to remove icons from the BottomNavigationBar?
Solution 1
A better way I think is to configure the BottomNavigationBar. Just add this line and it will work fine. No need to add lines to each item
selectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
unselectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
ex.
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
],
currentIndex: _selectedIndex,
selectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
unselectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
Solution 2
The key to this problem is to look at the individual BottomNavigationBarItem()
.
If you insert a Container with a height of 0.0 as the title you get all the vertical space of the item for your icon or activeIcon. And since the BottomNavigationBarItem
accepts any widget as icon or activeIcon you're pretty much free to use whatever you want.
In your case probably just a Text()
widget like so:
BottomNavigationBarItem(
icon: Text("My Item"),
activeIcon: Text("My Item"),
title: Container(
height: 0.0,
),
)
Joel Broström
Updated on December 17, 2022Comments
-
Joel Broström over 1 year
I just need the the label in my BottomNavigationBarItem's but I cant find a way to remove them.
You can hide the labels withshowSelectedLabels
andshowUnselectedLabels
set to false but there are no equivalent for Icons.Constructor:
BottomNavigationBar({ Key key, @required this.items, this.onTap, this.currentIndex = 0, this.elevation = 8.0, BottomNavigationBarType type, Color fixedColor, this.backgroundColor, this.iconSize = 24.0, Color selectedItemColor, this.unselectedItemColor, this.selectedIconTheme = const IconThemeData(), this.unselectedIconTheme = const IconThemeData(), this.selectedFontSize = 14.0, this.unselectedFontSize = 12.0, this.selectedLabelStyle, this.unselectedLabelStyle, this.showSelectedLabels = true, bool showUnselectedLabels, })
-
Joel Broström over 4 yearsYour right! It feels kind of 'hacky' but if it works it works.
-
Wicked Gummy Bear over 3 yearsAlso just used this implementation to hide the icon and change it for a centered FloatingActionButton, it really feels hacky and I'll probably try to find a better solution some day, but for now it works like a charm. THANKS!
-
Joel Broström almost 3 yearsThis seams like another solid approach. Probably more straight forward then the currently selected answer, so I'll change it to this instead.
-
Joel Broström almost 3 yearsThis is a solid answer and I have used it with great success, but the new answer is less hacky and requires less mental work to understand so I'll change it to the correct answer.