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

実行

ABOUTこの記事をかいた人

Yusuke Ito

■バックエンド開発(TypeScript、PHP etc)をメインに活動し、2020年からFlutterによるアプリ開発案件に参画し、多様なニーズに応えれるエンジニアを目指す。 ■エンジニア目線でより良い提案、目的に合わせた仕様の提案が得意です。 ■Flutterに関する技術、個人アプリの開発、キャリア、書評をメインに発信しています。 ■筋トレ、ゴルフ、読書が趣味