How to remove icons from the BottomNavigationBar?

Question

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

Homebrew

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

Kattegat

This seams like another solid approach. Probably more straight forward then the currently selected answer, so I'll change it to this instead. – Sil

please remove this obsolete solution. it's no longer working – Bartlet

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

Ofris

Your right! It feels kind of 'hacky' but if it works it works. – Sil

Also 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! – Odeliaodelinda

This 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. – Sil

Not sure if/when the definition changed, but I'm using Dart 2.18.0 and BottomNavigationBarItem doesn't have a title field, it only has a label field which only accepts a String. – Move

Answer 3

You can use 2 params with showSelectedLabels: false, showUnselectedLabels: false,

  BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        label: '',
        icon: Text("Menu 1"),
      ),
      BottomNavigationBarItem(
        label: '',
        icon: Text("Menu 2"),
      ),
    ],
    currentIndex: _selectedIndex,
    selectedItemColor: Colors.green[800],
    showSelectedLabels: false,
    showUnselectedLabels: false,
    onTap: _onItemTapped,
  )

Gardol

I think you read the question wrong. I need the label to stay but the icon to be removed. "You can hide the labels with showSelectedLabels and showUnselectedLabels set to false but there are no equivalent for Icons." – Sil

Answer 4

After my experimentation, there are now two ways to achieve this:

As the BottomNavigationBarItem widget doesn't have parameters for showSelectedIcons and showUnselectedIcons currently, so there is no most direct way to hide it.

Method 1: Set the icon size to 0.

Set size 0 to free up the original icon space.

bottomNavigationBar: BottomNavigationBar(

...

  iconSize: 0,
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), label: 'Shopping Cart'),
],

Method 2: Use a Text widget instead of an Icon widget.

This method treats the icon as part of the text, and then adjust it to hide the original label, then can achieves the desired effect of hiding the icon.

bottomNavigationBar: BottomNavigationBar(

...

  showSelectedLabels: false,
  showUnselectedLabels: false,
  items: [
    BottomNavigationBarItem(icon: Text('Home'), label: 'Home'),
    BottomNavigationBarItem(icon: Text('Shopping Cart'), label: 'Shopping 
  Cart'),
  ],

Keewatin