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

このページには広告が含まれる場合があります。

 

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

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

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

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

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

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

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

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

3)2で設定したitemが押された処理を「onTap」から「onDestinationSelected」に変更

4)(ある場合)BottomNavigationBarItemのアイコン下のラベルの設定を「NavigationDestinationLabelBehavior」で設定

(注)Itemの幅を設定するtype属性と「BottomNavigationBarType」の設定は、NavigationBarでは不要になりました。

 

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

こんな記事も読まれています

今すぐ無料お試しキットを受け取る

はじめての方へ


みんプロ式プログラミング講座体系・ラインナップ
みんプロ式プログラミング講座受講の流れ(割引特典利用方法)
サイトマップ(みんプロHPコンテンツ一覧)
運営会社概要

みんプロ作成アプリ





TOP