[flutter] BottomNavigationBarのlabelを非表示にする

やりたいこと#

BottomNavigationBarを利用して画面下にタブを実装したいです。タブにはアイコンのみ表示したいです。

つまりこれのラベルを消して

こうしたいです。

実装#

ScaffoldのbottomNavigationBarを使ってラベルなしの下タブを実装します。なお、環境は次の通りです。

Dart 3.4.0
Flutter 3.22.0

before : ラベル表示#

1
      bottomNavigationBar: BottomNavigationBar(
2
        items: const [
3
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'ほーむ'),
4
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'せってぃんぐ'),
5
        ],
6
      ),

after : ラベル非表示#

1
      bottomNavigationBar: BottomNavigationBar(
2
        items: const [
3
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'ほーむ'),
4
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'せってぃんぐ'),
5
        ],
6
        showSelectedLabels: false,   // <- 追加
7
        showUnselectedLabels: false, // <- 追加
8
      ),

2行追加しただけです。具体的に何をやっているかは次の通りです。

showSelectedLabels: false：選択されているタブのラベルを非表示
showUnselectedLabels: false：選択されていないタブのラベルを非表示

これですべてのタブのラベルが非表示になるため、アイコンのみ表示することができます。

参考：

flutter - BottomNavigationBar without Text - Stack Overflow