Flutterの公式ドキュメント
Navigate to a new screen and back
を元にFlutterで画面遷移をどう書くか紹介します。
Navigatorクラス
アプリの「画面」にあたるものは、AndroidではActivityであり、iOSではViewControllerです。
Flutterで画面にあたるものはrouteと呼ばれていて、NavigatorがRouteオブジェクトのスタックを管理します。
Navigator
がスタックに対してRoute
をプッシュしたり、ポップしたりすることで画面遷移を実現するというのが基本的な考え方です。
2つの画面間を遷移する
2つの画面を用意
最初の画面としてHomeScreen
というクラスを用意します。
画面の中央に”Next”と表示されたボタンが置いてあるだけです。
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Navigator Demo', theme: new ThemeData(primarySwatch: Colors.blue), home: new HomeScreen(), ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Navigator Demo Home Screen") ), body: new Center( child: new RaisedButton( child: new Text('Next'), textColor: Colors.white, color: Colors.lightBlue, onPressed: () { // ボタン押下時の処理 } ) ) ); } }
次に遷移先のNextScreen
です。こちらは”Back"と書かれたボタンが置かれているだけす。
import 'package:flutter/material.dart'; class NextScreen extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Next Screen'), ), body: new Center( child: new RaisedButton( child: new Text('Back'), textColor: Colors.white, color: Colors.lightBlue, onPressed: () {} ) ) ); } }
Navigator.pushで次の画面へ遷移
HomeScreen
のNextボタンを押した時にNavigator.pushメソッドを使ってNextScreen
へ遷移させます。
onPressed
の処理にNavigator.push
を追加します。
import 'package:flutter/material.dart'; import 'next_screen.dart'; ... class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( ... onPressed: () { Navigator.push( context, new MaterialPageRoute(builder: (context) => new NextScreen()) ); } ) ) ); } }
Navigator.push
はRoute
オブジェクトをプッシュしてスタックに追加します。 Route
オブジェクトとしてMaterialPageRoute
を利用しました。
Route
は遷移の見た目に関する情報も持っていますが、MaterialPageRoute
はプラットフォームに応じた遷移アニメーションを行ってくれます。
Navigator.popで元の画面へ遷移
”Back"ボタンを押したら元の画面へ戻るようにします。Navigator.pop
メソッドで今のRoute
オブジェクトをポップしてスタックから取り除きます。
class NextScreen extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( ... onPressed: () { Navigator.pop(context); } ) ) ); } }
AndroidとiOSでビルドすると以下のような感じになります。
Android | iOS |
---|---|
![]() |
![]() |