0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

BottomNavigationBarItemを動的生成したら選択/非選択状態の色がおかしくなった件

Last updated at Posted at 2019-11-02

##結論
BottomNavigationBar のselectedItemColor,unselectedItemColor をそれぞれ設定すれば直る。

軽くググっただけだと解決策が出てこなかったので情報共有として残す。

##現象
経緯1) Flutterでテキストベースゲーム作るかと思いたち、無計画に着手。
経緯2) 画面下部のバーで、選択可能行動を状況に合わせて置き換えようと考える。
経緯3) 動的生成をし始めたら、本件が発生した。

Screenshot_1572664922.png
BottomNavigationBarItem が3つまでならこう(これを正常系とする)

Screenshot_1572663781.png
ところがそれ以上になるとこうなった。

よくよく見たところ、実は2つ目の画像のほう、アイコン自体はうっすら表示されている。
タップ反応もある(onTapイベントが反応した)ので単純に色だけがおかしいと推測した。

そこで試しに、結論で示した対応を行ったところ直った。

##原因推測
Screenshot_1572665932.png
1枚目とこちらを見比べると、非選択状態アイコンから文字列が消されているのが分かると思う。
アイコン3個までと4個以降では BottomNavigationBar 内部処理が異なっており、デフォルト設定色が反映されなくなるのでは。
リファレンスに書いてあったら笑う。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?