今回はFlutterで画面遷移をする方法について解説します。
画面遷移の方法
Flutterでは、画面とページはルートと呼ばれます。
ルート間の画面遷移や戻る処理にはNavigatorクラスを利用します。
- Navigator.push():新しい画面へ遷移
- Navigator.pop():元の画面に戻る
push、popというメソッド名の通り、新しい画面へ遷移するたびにスタックされていきます。
pushが実行されると画面が上に積まれていき、popすると上から画面を取り出されます。
Navigator.push()
新しい画面へ遷移するには、Navigator.push()メソッドを使用します。
push()メソッドは、ナビゲータが管理するルートのスタックにルート(画面)を追加します。
第一引数にcontext、第二引数にMaterialPageRouteを指定しています。
MaterialPageRouteは画面遷移時にMaterialデザインに則ったアニメーションを提供します。
CupertinoPageRouteに置き換えれば、iOSっぽいアニメーションで画面遷移が可能です。
また、MaterialPageRouteではbuilderプロパティにWidgetを返すSecondRouteを指定しており、これが遷移先のページとなります。
// FirstRoute widget
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
}
Navigator.pop()
1つ前の画面に戻るには、Navigator.pop()メソッドを使用します。
pop()メソッドは、ナビゲータが管理するルートのスタックから現在のルート(画面)を削除します。(前の画面に戻る)
第一引数にcontextを指定しています。
FirstRouteからSecondRouteに画面遷移したとき、Navigator.pop()を実行するとFirstRouteに戻ります。
// SecondRoute widget
onPressed: () {
Navigator.pop(context);
}
画面遷移するアプリを作ってみる
新規にFlutterプロジェクトを作成します。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigate',
home: FirstRoute(),
);
}
}
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Route'),
),
body: Center(
child: RaisedButton(
child: Text('Go Next!'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: RaisedButton(
child: Text('Go Back!'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}