【Flutter】２つのスクリーンでの画面遷移 | Navigator.push()の実装

2021 7/16

2021.07.15 2021.07.16

本記事で分かること

「Navigator.push()」を実装した、２つのスクリーンでの画面遷移プログラムの作り方が分かります。

本記事ではFlutter公式サイトの「Navigate to a new screen and back」のガイドを元に日本語で分かりやすく画面遷移の方法を紹介していきます。

あわせて読みたい

Navigate to a new screen and backHow to navigate between routes.

Terminology: In Flutter, screens and pages are called routes. The remainder of this recipe refers to routes.
引用元：Flutter Navigate to a new screen and back

また、Flutterでは「Screen（スクリーン/画面)」や「Page(ページ)」のことを本来ならば「Route」と呼ぶべきですが本記事では馴染みのあるスクリーンとして解説していきます。

ティファ

それでは、２つのスクリーン間での画面遷移の方法を紹介していくよ！

下準備

今回はスクリーンを2つ使うので、分かりやすいようにそれぞれのスクリーンごとにDartファイルを用意してプログラムを作っていきます。

まずは「main.dart」ファイルとは別に「screen1.dart」「screen2.dart」ファイルを作ってください。

あわせて読みたい

【Flutter】新規DartファイルをFlutterで追加する方法本記事で分かること新規DartファイルをFlutterで追加する方法が分かる。新しい画面やクラスを別のDartファイルで作りたい方のために、Flutterで新規Dartファイルを追加…

ティファ

Dartファイルを2つ用意したら下の初期コードをそれぞれコピペしてください。

「main.dart」にコピペ

Dartファイル名：main.dart
初期画面となる「screen1.dart」のインポート済み

// main.dartファイルの最終コード

import 'package:flutter/material.dart';
import 'screen1.dart';

void main() {
  runApp(
    MaterialApp(
      home: Screen1(),
    ),
  );
}

「screen1.dart」にコピペ（Screen1）

Dartファイル名：screen1.dart
クラス名：Screen1

// screen1.dartファイルの初期コード

import 'package:flutter/material.dart';

class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('スクリーン1'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('スクリーン２へ'),
          onPressed: () {},
        ),
      ),
    );
  }
}

「screen2.dart」にコピペ（Screen2）

Dartファイル名：screen2.dart
クラス名：Screen2

// screen2.dartファイルの初期コード

import 'package:flutter/material.dart';

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("スクリーン２"),
        backgroundColor: Colors.red,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
          },
          child: Text('スクリーン１へ'),
        ),
      ),
    );
  }
}

ティファ

本記事では、screen1.dartのスクリーンを「Screen1」、screen2.dartを「Screen2」と呼んでいくよ。

また、初期コードでは既にAppBarとElevatedButtonが各スクリーンで実装されているよ！

最終ゴール：「Navigator.push()」実装による画面遷移

ティファ

「Navigator.push()」と「Navigator.pop()」を実装することで最終的に上動画のような画面遷移が行えるよ！

「Navigator.push()」で画面遷移させる（Screen1での実装）

「Navigator.push()」を実装してScreen1(初期画面)からScreen2に画面遷移する方法を紹介します。

STEP

Screen1に画面遷移先のScreen2をインポートする

//screen2.dartをインポートする
import 'screen2.dart';

Screen1に画面遷移先のScreen2をインポートします。

STEP

「Navigator.push()」で初期画面からScreen2に画面遷移させる

//Navigator.pushメソッドの使い方
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => 画面遷移先のクラス名()),
  );
}

//main.dartのElevatedButtonにコピペ
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => Screen2()),
  );
}

初期画面からもう一つある別のスクリーンに画面遷移する場合は「Navigator.push()」を使用します。上記のコードをElevatedButtonのonPressedプロパティに実装します。

STEP

「screen1.dart」の最終コード

//「screen1.dart」の最終コード

import 'package:flutter/material.dart';
import 'screen2.dart';

class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('スクリーン1'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('スクリーン２へ'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => Screen2()),
            );
          },
        ),
      ),
    );
  }
}

ティファ

これでScreen1(初期画面)からScreen2へ画面遷移できるようになりました！次はScreen2からScreen1へ戻るプログラムを実装していきます。

「Navigator.pop」で初期画面(Screen1)に画面遷移させる（Screen2での実装）

画面遷移先から「Navigator.pop()」を使って初期画面である「Screen1」に戻る方法を紹介します。

「Navigator.pop()」は一つ前のスクリーンに戻るだけなので、必ずしも初期画面に戻るとは限りません。

STEP

Navigator.pop()で画面遷移させる

//初期画面(Screen1)に画面遷移させる

onPressed: () {
  Navigator.pop(context);
}

初期画面に戻るには「onPressedプロパティ」に「Navigator.pop()」を実装するだけです。

STEP

「screen2.dart」の最終コード

//screen2.dartの最終コード

import 'package:flutter/material.dart';

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("スクリーン２"),
        backgroundColor: Colors.red,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('スクリーン１へ'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

ティファ

これでScreen2からScreen1(初期画面)へ戻るプログラムを実装できました。また、2つ以上のスクリーンで画面遷移をする方法が知りたい方はこちらの記事をお読みください！

あわせて読みたい