【お知らせ】みんプロ式Flutter講座は2026年4月末をもって新規販売を終了いたしました。詳しくはこちら →
[Flutter]BottomNavigationBarからNavigationBarへの移行方法
このページには広告が含まれる場合があります。
2023年11月にアップグレードされたFlutter3.16以降、Flutterアプリを作る際に（性格にはMaterialAppで作る際に）使用するデフォルトのデザインガイドライン（Google先生が推奨するデザインガイドラインである「マテリアルデザイン」）のバージョンが「Material 2」から「Material 3」に変更されましたが、
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」で設定
（注）Itemの幅を設定するtype属性と「BottomNavigationBarType」の設定は、NavigationBarでは不要になりました。
（詳しくは、以下の動画で説明していますので、よろしければご覧ください）
