📱
Flutter:BottomNavigationBarItemのIconとLabelそれぞれの色を別々にする.
はじめに
- こんなふうにしたい.
- ※
selected
されたBottomNavigationBarItem
と,unselected
されたBottomNavigationBarItem
で色やラベルのテキストスタイルの区別はしない
BottomNavigationBar
で詳細な設定を行う
やり方:
bottomNavigationBar: BottomNavigationBar(
currentIndex: 1,
// アイコンサイズ
iconSize: 35,
// アイコンの色設定をここで行う(統一する)
selectedIconTheme:
const IconThemeData(color: ・・・),
unselectedIconTheme:
const IconThemeData(color: ・・・),
// ラベルの色設定をここで行う(統一する)
selectedItemColor: ・・・,
unselectedItemColor: ・・・,
// ラベルのTextstyle設定(fontSizeを統一させる)
selectedLabelStyle: TextStyle(fontSize: ・・・),
unselectedLabelStyle: TextStyle(fontSize: ・・・),
// 背景色
backgroundColor: CommonColors.primaryColor,
items: const [
BottomNavigationBarItem(label: "レシピ追加", icon: Icon(Icons.add)),
BottomNavigationBarItem(label: "ホーム画面更新", icon: Icon(Icons.home)),
BottomNavigationBarItem(label: "設定", icon: Icon(Icons.settings)),
],
// タップされたボタンに応じて,画面遷移する.
onTap: (index) {
・・・・・
},
),
備考
- 下記のように,
LabelStyle(selectedLabelStyleとunselectedLabelStyle)
のほうでラベル色設定してもラベル色は変更されません. - この時,
ItemColor(selectedItemColorとunselectedItemColor)
の設定は行ってません.
最後に
他のやり方があれば教えて欲しいです.🙇
Discussion