【Flutter】BottomNavigationBarの背景色が強制的に白くなる

FlutterでBottomNavigationBarの背景色が強制的に白くなるのをなんとかしたい！

概要

今回の記事では、FlutterでBottomNavigationBarの背景色が強制的に白くなるのをなんとかする手順を掲載する。

BottomNavigationBarItemを3つから4つに増やしたらBottomNavigationBarの背景色が強制的に白くなってしまう！そんなことがあるのか！？

仕様書

環境

• Android Studio Giraffe | 2022.3.1
• Flutter 3.13.5

手順書

BottomNavigationBarItemを3つから4つに増やしたらBottomNavigationBarの背景色が強制的に白くなってしまう原因は、BottomNavigationBarに含まれるBottomNavigationBarItemが4つ以上になるとBottomNavigationBarのtypeがBottomNavigationBarType.shiftingに自動的に設定されるのが原因らしい。

下記のようにBottomNavigationBarのtypeをBottomNavigationBarType.fixedに設定し直すとテーマの色が反映されるようになる。

bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,

    items: const [
        BottomNavigationBarItem(...),
        BottomNavigationBarItem(...),
        BottomNavigationBarItem(...),
        BottomNavigationBarItem(...),
    ],

    ...
}

ちなみになんですが、BottomNavigationBarItemが4つ以上の場合BottomNavigationBarType.fixedを設定しないとbackgroundColorの設定も効かない。

まとめ（感想文）

そういうことあるんだと思う今日この頃。