アプリのボトムナビゲーションバーについての整理（Flutter用）
https://gyazo.com/a333444882a1f1d45c820f5facec9f1a
前提
※ 仕様の話は、広く参考になる、、かも?
参考
material 3 のnavigation-barのページ
整理事項
仕様
デザイン
実現方法の調査（過去実装例など）
仕様）
BottomNavigationBarの仕様として論点に挙がるものとしては、以下があると考える。
①どこまで表示させるか
1 全ての画面に表示させる。
ハンバーガーメニューから遷移したとしても表示される。
既存のアプリ例（2023/3月調べ）
個人的には見たことがない。
2 一部の画面だけ表示させる。
1 BottomNavigationBarに指定されたトップの画面のみ表示
既存のアプリ例（2023/3月調べ）
PayPay Youtube mocri マクドナルド
2 BottomNavigationBarに指定されたトップの画面と、その画面から遷移する画面
既存のアプリ例（2023/3月調べ）
乗り換え案内・Kindle（本を読む以外）
material 3にこのパターンの動きのGifはあった
②選択時・非選択時の挙動
③アイコンにバッチを表示させるか
※ 実装経験はなし。
①について、メリット・デメリット
１）
メリット
どこでもボトムナビゲーションの画面に遷移することができる。（？）
デメリット
「BottomNavigationBar」の選択状態の指定方法を決定することができない。
遷移構造が複雑になり、意図しないバグを生んでしまう恐れがある。
主要アプリでもあまりみない気がするので、おそらく採用すべきではない（？）
ヘッダーとボトムナビゲーションで同じ項目があった場合には検討が必要になりそう。
仕様として気づいているなら、できるだけ避けたい。
2 - 1）
メリット
構造として単純
実装もそこまで難しくない。
ユーザーの遷移のさせ方を縛ることができる。
デメリット
主要機能へのアクセスがしにくい場合がある。
2 - 2）
メリット
構造として比較的単純で、自然な挙動。
デメリット
TOデ.icon とは？
エンジニアからデザインナーに向けた気持ち表明的な感じ
不可能ではないけど、実装時間かかるかも、的ニュアンスを書いたところにつけた。。
A デフォルト
文章による説明（私が勝手に書いてる） : 下部に固定
https://gyazo.com/a333444882a1f1d45c820f5facec9f1a
Flutterの実装方法
デザイン的にはデフォルトで用意されている、BottomNavigationBarで十分
TOデ.icon 外枠に丸みを持たせる、などは可能。
B 一部を強調したパターン
文章による説明（私が勝手に書いてる）
一部だけ枠をはみ出すデザイン・テキストの色なども違う場合が多い
https://gyazo.com/e8105408df383903c59aa700bbe1c5dd
比較的見かける気がするのは「真ん中部分だけ強調された場合」または「選択中のものが強調される場合」
選択時・非選択時の挙動（デザイン）は要相談
Flutterの実装方法
強調のされ方は多岐に渡る。上記パッケージの図を拝借すると以下のような形（どうにかできる..? かも）
https://gyazo.com/d9a029a3cf83fd3e41b971f42ae55b80
丸の部分が「別れている」パターンもありそう。
https://gyazo.com/5f64cff4a8edfec946884e5724fd983d
こちらは以下のパッケージがあるが、要技術検証が必要（画像もパッケージのREADMEから拝借した）
TOデ.icon よっぽど要望がない限りは「真ん中部分だけ強調された場合」だけ可としたい気持ち。
※ ある程度のデザイン変更は許容できるとは思う。
C ボトムナビゲーションが浮かんでいるパターン
文章による説明（私が勝手に書いてる）
ボトムナビゲーションが下部に固定されておらず、少しだけ浮かんでいる。
https://gyazo.com/ba50dfa8b58c4356167c1bf57b075f77
Flutterの実装方法
検証は必要だが不可能ではないデザイン。
TOデ.icon C + B となる場合は要相談、それなりに工数が必要。
その他
「アクティブ」にしたボタン部分の背景を変更する
TOデ.icon 実装できなかった。