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

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

 

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

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

blank

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

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

blank

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

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

blank

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

blank

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

blank

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

blank

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

blank

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

 

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

(注)以下のフォームより当社公式メールマガジンにご登録頂くことで
約6時間のFlutter動画講座が無料で受講できます!

(メールマガジンは登録無料・いつでも解除可)

[体験版]
ゼロからのFlutter
(Flutter初級編) 

 

【体験版講座に含まれるもの】
・約70本・約6時間の動画テキスト
・1つの課題アプリのソースコード
・Flutterアプリを作るための「環境構築ライブサポート(Google Meet)」
(「体験版」は全30時間超の「製品版」の約1/6を抜粋した講座です。「製品版」の詳細はこちらから)

 

【当社公式メルマガご登録6大特典】
blank

\約6時間動画講座を無料プレゼント!/
今すぐ無料体験版に申し込む ▶
無料メルマガ登録で講座割引クーポンなど6大特典ゲット!

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

今すぐプレゼントを受け取る(約6時間のFlutter初級編体験版動画講座を無料でプレゼント)
blank

はじめての方へ

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

みんプロ作成アプリ

blank
blank
blank
blank
blank

みんプロ式動画講座(コア・Flutter)

ゼロからのFlutter(初級編)-はじめてのプログラミングからアプリリリースまで-
Flutter中級編1-Web通信・設計・状態管理・DIの基礎-
Flutter中級編2-Firebase/地図・カメラ連携等の基礎-
Flutter中級編3-広告/アプリ内課金等の基礎-
Flutter中級編4-Webアプリとレスポンシブデザインの基礎-

みんプロ式動画講座(サテライト)

Flutter/Dartトラブルシューティング・小ネタ集(コア初級編受講で無料プレゼント)
ゼロからのGit・GitHub(コマンドラインツールを極力使わないバージョン管理入門)
Flutter/Dartにおける設計・状態管理・DIの解説集
Dart逆引き大辞典
Flutterにおけるテストの基礎
blank
blank

今すぐプレゼントを受け取る(約6時間のFlutter初級編体験版動画講座を無料でプレゼント)
TOP