Flutterで画面遷移する方法

September 29, 2020

今回は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 {
    
    Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Navigate',
        home: FirstRoute(),
    );
    }
}

class FirstRoute extends StatelessWidget {
    
    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 {
    
    Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
        title: Text("Second Route"),
        ),
        body: Center(
        child: RaisedButton(
            child: Text('Go Back!'),
            onPressed: () {
            Navigator.pop(context);
            },
        ),
        ),
    );
    }
}

実行

flutter-how-to-move-page_execute

CONTACT

お問い合わせ

ECサイトやホームページの構築、保守・運用方法に課題を感じている方、まずはご相談ください。

お問い合わせ