Flutterの画面遷移のやり方が知りたい。
Flutterのnavigator.pushの使い方がよく分からない。
ということで悩んでませんか？
そこで、今回はFlutterのnavigatorにおける基本的な使い方をサンプルコードとアプリ画面で解説します。navigatorを使ことで、画面遷移が簡単に作成できます。画面遷移がないアプリはほぼないのでしっかり押さえておきましょう！
navigatorの基本的な使い方
ちなみに、Flutterのスキルを０から効率的に伸ばす方法は、仕事として実務を経験することです。そして、最速で転職・就職・副業するには学習をどんどん進め、ポートフォリオを最優先で完成させましょう！応募できそうなFlutter案件をチェックすると必要なスキルも分かり学習に身が入ります！Flutter案件/求人の探し方はコチラで詳しく解説していますので、ご参考にして下さい。
【Flutter】Nnavigator：画面遷移/ページ遷移を簡単に作成できる
navigatorについてFlutter公式サイトをもとに解説します。navigatorを使えば、上記の動画のように画面遷移が簡単に作成できます。
Navigatorについて
A widget that manages a set of child widgets with a stack discipline.
（直訳）スタック制御で子ウィジェットのセットを管理するウィジェット。
引用：Flutter公式サイト「Navigator class」
スタックとは、基本的なデータ構造の考え方の1つで、データを後入れ先出しの構造で持つものです。
【Flutter】画面遷移/ページ遷移：Navigatorのサンプルコード
navigatorのサンプルコードは以下の通りです。コピペでそのまま使えます。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ScreenMoveDemo(),
);
}
}
class ScreenMoveDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('【画面遷移デモ】1ページ')),
body: Center(
child: ElevatedButton(
child: Text('次ページ'),
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => NextPage()));
},
),
),
);
}
}
class NextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('【画面遷移デモ】2ページ'),
backgroundColor: Colors.red,
),
body: Center(
child: ElevatedButton(
child: Text("戻る"),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
navigatorで押さえておくべきポイントは以下の3点です。順番に解説していきます。
Navigator.push | 次のページに遷移 |
Navigator.pop | 前のページに戻る |
Navigator.push
Navigator.push(
context, MaterialPageRoute(builder: (context) => NextPage()));Navigator.pushは引数としてMaterialPageRouteを指定。次の画面に遷移する際にMaterialDesignのアニメーションをするための設定です。CupertinoPageRouteに指定すれば、iOSのアニメーションで画面の遷移をおこないます。
builderプロパティの戻り値は、画面遷移先のページを設定します。上記ではNextPageを指定。
Navigator.pop
Navigator.pop(context);Navigator.popは今表示している画面を閉じ、前の画面に遷移します。
まとめ：Flutter入門者は画面遷移/ページ遷移：Navigatorは押さえておくべき！
今回の記事では、Flutterのnavigatorにおける基本的な使い方をサンプルコードとアプリ画面で解説しました。
navigatorで押さえておくべきポイント
Navigator.push | 次のページに遷移 |
Navigator.pop | 前のページに戻る |
Flutterエンジニアになるには？
初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。
Flutterの学習方法を知る
Flutter をスクールで学ぶ
Flutterの副業を探す
おまけ：Flutter入門の完全ガイド
Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
- ローカルデータベース（SQLite）
- グラフ①（fl_chart）
- グラフ②（syncfusion_flutter_charts）
- カレンダーから日付取得①（syncfusion_flutter_datepicker）
- カレンダーから日付取得②（month_picker_dialog_2）