[Flutter]BottomNavigationBarからNavigationBarへの移行方法

2023年11月にアップグレードされたFlutter3.16以降、Flutterアプリを作る際に（性格にはMaterialAppで作る際に）使用するデフォルトのデザインガイドライン（Google先生が推奨するデザインガイドラインである「マテリアルデザイン」）のバージョンが「Material 2」から「Material 3」に変更されましたが、

2024.05.24

Flutter3.16以降「Material3」が標準仕様になったことに伴う留意点（何も変更していないのに画面デザインが崩れる可能性あり）

2023年11月にFlutterのSDKのバージョンが3.16にアップデートされましたが、その中で大きな変更があったのが、Flutt...

それに伴って、画面下部に配置されたナビゲーションメニューを設定するためのウィジェット（Widget）が、「BottomNavigationBar」から「NavigationBar」に変更されています。

BottomNavigationBarも引き続き使えますが、BottomNavigationBarはMaterial2仕様のデザインなので、Material3仕様にしたい場合はNavigationBarを使うことが推奨されているようです。

逆にいうと、他のWidgetの場合は、Flutter3.16にアップグレードすると見た目が自動的にMaterial3仕様に変わりますが、

BottomNavigationBarに関しては、アプリ全体をMaterial3仕様にしても、原則見た目に変更がないということになるようです。

ですので、Material2仕様のBottomNavigationBarを、Material3仕様のNavigationBarに移行させたい場合は、

１）Scaffold#bottomNavigationBar属性にある「BottomNavigationBar」コンストラクタを「NavigationBar」に変更

２）「items」属性で設定した「BottomNavigationBarItem」のリストを、「destinations」属性で「NavigationDestination」のリストに変更

３）２で設定したitemが押された処理を「onTap」から「onDestinationSelected」に変更

４）（ある場合）BottomNavigationBarItemのアイコン下のラベルの設定を「NavigationDestinationLabelBehavior」で設定

（詳しくは、以下の動画で説明していますので、よろしければご覧ください）