やりたいこと
BottomNavigationBar
を利用して画面下にタブを実装したいです。タブにはアイコンのみ表示したいです。
つまりこれのラベルを消して
![](https://i0.wp.com/mem-archive.com/wp-content/uploads/2024/06/bottom_navigation_bar.jpg?resize=370%2C131&ssl=1)
こうしたいです。
![](https://i0.wp.com/mem-archive.com/wp-content/uploads/2024/06/bottom_navigation_bar2.jpg?resize=365%2C133&ssl=1)
実装
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
:選択されていないタブのラベルを非表示
これですべてのタブのラベルが非表示になるため、アイコンのみ表示することができます。
参考:
![](https://i0.wp.com/cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?resize=160%2C90&ssl=1)
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 ...
コメント