【Flutter】ボタン・ナビゲーションバーで画面遷移(ページ移動)

Flutterで画面遷移させる方法とサンプルコードを紹介します。

【flutter】ボタンで画面遷移

Flutterの画面遷移は、ウィジェットをスタックで管理できる「Navigator」を使用します。

実行例


ホーム画面からその他画面、またその他画面への遷移し戻ることが出来るようにする場合は、次の画面への遷移にpush、画面を戻るときはpopを使用します。
(pushされた画面でpopできれば元の画面に戻ることができます)
能であれば、バックオペレーションが可能になります。※アクションバーの戻るボタ

  Navigator.of(context).pushNamed("/next"); 

スタックされた画面から、画面をクリアしてホーム画面へ戻りたい場合は、popUntil を使用します。 popUntil は条件に一致するまでスタックから画面をpopします。

  Navigator.popUntil(context, ModalRoute.withName("/home")); 

第二引数の predicate にPopを止めたい条件を指定します。
ダイアログを表示する場合は、showDialogを使用します。
showDialog の内部コードでは、push が呼ばれています。ダイアログを閉じる場合は、pop を使用します。

サンプルコード

■main.dart

■screens/home_page.dart

■screens/setting_page.dart

画面下部にあるナビゲーションバーのことを、ボトムナビゲーションバー(bottomNavigationBar)といいます。
Scaffoldで指定してやり、onTapは引数としてタップされたボタンの数値(index)を持っているので、それを元に画面遷移を実装します。

関連記事
1 【Flutter入門】iOS、Android、Windowsアプリ開発
flutter
西住工房

コメント

タイトルとURLをコピーしました