Flutterで画面遷移する方法

今回は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);
          },
        ),
      ),
    );
  }
}

実行