やりたいこと
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 ...
コメント