やりたいこと
BottomNavigationBar
を利用して画面下にタブを実装したいです。タブにはアイコンのみ表示したいです。
つまりこれのラベルを消して

こうしたいです。

実装
Scaffold
のbottomNavigationBar
を使ってラベルなしの下タブを実装します。なお、環境は次の通りです。
- 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 th...
コメント