BottomNavigationBarの背景色が突然白くなる

この記事は海洋大技術系サークル Advent Calendar 2023の4日目です。

はじめに

こんにちは！
そろそろクリスマスが近づいてきましたね。皆さんのクリスマスのご予定は？
お前はどうなんだって？そりゃ予定ありますよ！！！　　

バイトのね。。。。

今月のおすすめ曲は、これだ！！！！！
クリスマス・イブ / 山下達郎

そんなことはどうでもよくて、

この記事は、私と同じ状況下に立たされた人の少しでも助けとなればと思いこの記事を書いました。

今回起きた問題

背景色が元々黒だったBottomNavigationBarが
↓

このように突然背景色がいきなり白くなった！

最近Androidのリリース周りをいじっていて、iOSに変な影響が出てしまったのか？！と思っていたが、全く関係ありませんでした。

原因

原因は、BottomNavigationBarのBottomNavigationBarItemを３つから４つに増やしたことが原因です。

BottomNavigationBarTypeプロパティには主に、fixed,shiftingの２つの値があります。

fixedとは→
これはデフォルトのタイプで、ボトムナビゲーションバーのアイテム数が3つ以下の時に適しています。
すべてのアイテムは同じサイズで表示されます。
アイテムがアクティブでない場合でも、アイコンとテキストが表示されます。

shiftingとは→
このタイプは、アイテム数が4つ以上の場合に適しています。
アクティブなアイテムはより大きく表示され、他のアイテムより目立ちます。
非アクティブなアイテムはアイコンのみを表示し、テキストは非表示になります。

BottomNavigationBarItemを３つから４つにした時に強制的に、typeがfixedからshiftingに変化してしまいます。

元々３つだったBottomNavigationBarItemをその他画面を作るために４つにした時に、変化してしまったのですね。

解決策

type: BottomNavigationBarType.fixed,

を入れればtypeがfixedになるので、解決します。

final bar =BottomNavigationBar(
     type: BottomNavigationBarType.fixed,←これ
     items:items,
     backgroundColor: Color.fromARGB(255, 7, 7, 8),
     selectedItemColor: Color.fromARGB(255, 10, 6, 248),
     unselectedItemColor: Color.fromARGB(255, 247, 246, 246),
     currentIndex: index,
     onTap: (index){
       ref.read(indexProvider.notifier).state=index;
     },
   );

↑私の場合

まとめ

ちゃんとBottomNavigationBarを理解していなかった自分にとっては、とてもいい勉強になりました。

ここまでお疲れ様でした。