Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove icons from the BottomNavigationBar?

I just need the the label in my BottomNavigationBarItem's but I cant find a way to remove them.
You can hide the labels with showSelectedLabels and showUnselectedLabels 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,
  })
like image 240
Joel Broström Avatar asked Dec 17 '22 14:12

Joel Broström


1 Answers

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,
  ),
)
like image 102
Robin Reiter Avatar answered Feb 04 '23 15:02

Robin Reiter