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

2つのスクリーンでの画面遷移 Navigator.push()の実装
本記事で分かること

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

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

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つのスクリーン間での画面遷移の方法を紹介していくよ!

目次

下準備

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

まずは「main.dart」ファイルとは別に「screen1.dart」「screen2.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('スクリーン2へ'),
          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("スクリーン2"),
        backgroundColor: Colors.red,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
          },
          child: Text('スクリーン1へ'),
        ),
      ),
    );
  }
}
ティファ

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

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

初期コードスクリーン1
初期コードスクリーン2

最終ゴール:「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('スクリーン2へ'),
          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("スクリーン2"),
        backgroundColor: Colors.red,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('スクリーン1へ'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}
ティファ

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

Flutterを学ぶなら「Udemy」または「侍エンジニア塾」

  • 独学でFlutterを学ぶなら「Udemy」
  • プログラミングスクールで学ぶなら「侍エンジニア塾」

Flutterは2018年にリリースされたばかりの最新技術のため日本語ソースが圧倒的に少なく勉強方法が制限されています。ただ、英語が分からなくてもFlutterを先取りして勉強する方法はあります。

独学でFlutterを勉強するなら世界最大級のオンライン学習プラットフォーム「Udemy」、プログラミングスクールで講師からマンツーマンでFlutterを学習したい方は「侍エンジニア塾」がおすすめです。

よかったらシェアしてね!
目次
閉じる