MENU
カテゴリー
＼気になるカテゴリーをクリック！／
【Flutter】画面遷移/ページ遷移:Navigator使い方を3分で解説!（サンプルコードあり）
この記事には広告を含む場合があります。
Flutterの画面遷移のやり方が知りたい。
Flutterのnavigator.pushの使い方がよく分からない。
ということで悩んでませんか？
そこで、今回はFlutterのnavigatorにおける基本的な使い方をサンプルコードとアプリ画面で解説します。navigatorを使ことで、画面遷移が簡単に作成できます。画面遷移がないアプリはほぼないのでしっかり押さえておきましょう！
この記事で分かること！
navigatorの基本的な使い方
フリーランスのFlutterエンジニアとして働きたい方にオススメのエージェントはこちらで詳しく解説しています。
あわせて読みたい
Flutterフリーランスエージェントおすすめサイト5選！徹底比較！
Flutterの仕事をフリーランスでしたい！ どこのサイトがFlutter求人が多いのか知りたい！ そこで、今回はFlutterエンジニアの求人案件探しにオススメのサービス5選をご...
目次
【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学習ロードマップ！０から初心者向けに完全解説！【2023年最新】
Flutterエンジニアになりたい Flutterエンジニアになるための学習ロードマップを知りたい これから、Flutterエンジニアを目指すならどうやったらなれるのか進め方は知っ...
Flutter をスクールで学ぶ
あわせて読みたい
【失敗しない選び方】Flutterプログラミングスクール3社を徹底比較！SE歴13年目が解説！
Flutterでスマホアプリ開発をしたい！けど、挫折気味・・・ Flutterが学べるプログラミングスクールを知りたい！どこが良いのかな？ 新卒でFlutter使ってるけど、よく分...
Flutterの副業を探す
あわせて読みたい
Flutterの副業案件おすすめのサイト3選！【週2・リモートあり】
Flutterで副業を始めたい！どこのサイトがおすすめか知りたい！ 週2,3日でスキルアップが望めるようなFlutterの案件をやりたい！どこのエージェントが良いかな？ 初めて...
おまけ：Flutter入門の完全ガイド
あわせて読みたい
【Flutter入門ガイド2023】知識ゼロから使い方・全体像が分かる！
Flutterの全体像がわからない。 Flutterの学習すべきことを知りたい。 新しいことを学習する際は全体像を捉えることが重要です。「今はここを学習してるんだな。」と実...
Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
- ローカルデータベース（SQLite）
- グラフ①（fl_chart）
- グラフ②（syncfusion_flutter_charts）
- カレンダーから日付取得①（syncfusion_flutter_datepicker）
- カレンダーから日付取得②（month_picker_dialog_2）
コメント