「Navigator.push()」を実装した、２つのスクリーンでの画面遷移プログラムの作り方が分かります。
本記事ではFlutter公式サイトの「Navigate to a new screen and back」のガイドを元に日本語で分かりやすく画面遷移の方法を紹介していきます。
Terminology: In Flutter, screens and pages are called routes. The remainder of this recipe refers to routes.
引用元：Flutter Navigate to a new screen and back
また、Flutterでは「Screen（スクリーン/画面)」や「Page(ページ)」のことを本来ならば「Route」と呼ぶべきですが本記事では馴染みのあるスクリーンとして解説していきます。
ティファそれでは、２つのスクリーン間での画面遷移の方法を紹介していくよ！
下準備
今回はスクリーンを2つ使うので、分かりやすいようにそれぞれのスクリーンごとにDartファイルを用意してプログラムを作っていきます。
まずは「main.dart」ファイルとは別に「screen1.dart」「screen2.dart」ファイルを作ってください。
ティファDartファイルを2つ用意したら下の初期コードをそれぞれコピペしてください。
「main.dart」にコピペ
- Dartファイル名：main.dart
- 初期画面となる「screen1.dart」のインポート済み
// main.dartファイルの最終コード
import 'package:flutter/material.dart';
import 'screen1.dart';
void main() {
runApp(
MaterialApp(
home: Screen1(),
),
);
}「screen1.dart」にコピペ（Screen1）
- Dartファイル名：screen1.dart
- クラス名：Screen1
// screen1.dartファイルの初期コード
import 'package:flutter/material.dart';
class Screen1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('スクリーン1'),
),
body: Center(
child: ElevatedButton(
child: Text('スクリーン２へ'),
onPressed: () {},
),
),
);
}
}「screen2.dart」にコピペ（Screen2）
- Dartファイル名：screen2.dart
- クラス名：Screen2
// screen2.dartファイルの初期コード
import 'package:flutter/material.dart';
class Screen2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("スクリーン２"),
backgroundColor: Colors.red,
),
body: Center(
child: ElevatedButton(
onPressed: () {
},
child: Text('スクリーン１へ'),
),
),
);
}
}本記事では、screen1.dartのスクリーンを「Screen1」、screen2.dartを「Screen2」と呼んでいくよ。
また、初期コードでは既にAppBarとElevatedButtonが各スクリーンで実装されているよ！
最終ゴール：「Navigator.push()」実装による画面遷移
ティファ「Navigator.push()」と「Navigator.pop()」を実装することで最終的に上動画のような画面遷移が行えるよ！
「Navigator.push()」で画面遷移させる（Screen1での実装）
「Navigator.push()」を実装してScreen1(初期画面)からScreen2に画面遷移する方法を紹介します。
//screen2.dartをインポートする
import 'screen2.dart';Screen1に画面遷移先のScreen2をインポートします。
//Navigator.pushメソッドの使い方
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => 画面遷移先のクラス名()),
);
}
//main.dartのElevatedButtonにコピペ
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Screen2()),
);
}初期画面からもう一つある別のスクリーンに画面遷移する場合は「Navigator.push()」を使用します。上記のコードをElevatedButtonのonPressedプロパティに実装します。
//「screen1.dart」の最終コード
import 'package:flutter/material.dart';
import 'screen2.dart';
class Screen1 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) => Screen2()),
);
},
),
),
);
}
}これでScreen1(初期画面)からScreen2へ画面遷移できるようになりました！次はScreen2からScreen1へ戻るプログラムを実装していきます。
「Navigator.pop」で初期画面(Screen1)に画面遷移させる（Screen2での実装）
画面遷移先から「Navigator.pop()」を使って初期画面である「Screen1」に戻る方法を紹介します。
//初期画面(Screen1)に画面遷移させる
onPressed: () {
Navigator.pop(context);
}初期画面に戻るには「onPressedプロパティ」に「Navigator.pop()」を実装するだけです。
//screen2.dartの最終コード
import 'package:flutter/material.dart';
class Screen2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("スクリーン２"),
backgroundColor: Colors.red,
),
body: Center(
child: ElevatedButton(
child: Text('スクリーン１へ'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}これでScreen2からScreen1(初期画面)へ戻るプログラムを実装できました。また、2つ以上のスクリーンで画面遷移をする方法が知りたい方はこちらの記事をお読みください！
Flutterを学ぶなら「Udemy」または「侍エンジニア塾」
- 独学でFlutterを学ぶなら「Udemy」
- プログラミングスクールで学ぶなら「侍エンジニア塾」
Flutterは2018年にリリースされたばかりの最新技術のため日本語ソースが圧倒的に少なく勉強方法が制限されています。ただ、英語が分からなくてもFlutterを先取りして勉強する方法はあります。
独学でFlutterを勉強するなら世界最大級のオンライン学習プラットフォーム「Udemy」、プログラミングスクールで講師からマンツーマンでFlutterを学習したい方は「侍エンジニア塾」がおすすめです。
