Zenn
📱

Flutter：BottomNavigationBarItemのIconとLabelそれぞれの色を別々にする．

2024/05/18に公開
Flutter
Dart
tech

はじめに

  • こんなふうにしたい．
  • ※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