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

やりたいこと

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

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

こうしたいです。

実装

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

  • Dart 3.4.0
  • Flutter 3.22.0

before : ラベル表示

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

after : ラベル非表示

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

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

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

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

参考:

BottomNavigationBar without Text
Yes, my question is this. How can I do like this? I did a BottomNavigationBar but it looks like this. My codes are like ...

コメント