Flutter

【Flutter入門】画面遷移のやり方

こんにちは、アプリ開発者のテルです!

「画面遷移のやり方がわからない」とお悩みではないでしょうか?

テル

本記事ではそんな悩みを解決していきます!

本記事を読むメリット
  1. 画面遷移のやり方がわかるようになる
  2. 使用例を用いた解説で初心者でも理解できる

画面遷移の基本

Flutterにおける画面遷移はいくつかありますが、基本的には2パターンに分かれます。

  1. 画面が2つの場合
  2. 画面が3つ以上の場合

それでは、それぞれ詳しく見ていきましょう!

画面が2つの場合

上記のデモを用いて解説していきます!

ファイル構成

STEP1 – 次の画面に遷移する

 onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Screen2),
                  );
                },

解説

初期画面にあるボタンのonPressed()Navigator.pushを加え、遷移させたい画面を戻り値として返します。

そうすることにより、次の画面に遷移することができます。

STEP2 – 前の画面に遷移する

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

解説

2つ目の画面にあるボタンのonPressed()Navigator.popを加えます。

そうすることにより、遷移元である前の画面に遷移することができます。

画面が3つ以上の場合

上記のデモを用いて解説していきます!

ファイル構成

STEP1 – main.dartにルートを作成する

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/', // 初期画面を'/'とする
      routes: {
        '/': (context) => Screen0(), // Screen0()を'/'とする
        '/first': (context) => Screen1(), // Screen1()を'/first'とする
        '/second': (context) => Screen2(), // Screen2()を'/second'とする
      },
    );
  }
}

解説

main.dartでそれぞれの画面に名前(/…)をつけます。名前はinitialRouteで初期画面を設定し、routesでその他の画面を設定します。

STEP2 – 移動したい画面に遷移する

onPressed: () {
   Navigator.pushNamed(context, '/first');  // 移動したい画面の名前を設定する
  },

解説

後は上記のように、ボタンのonPressedに遷移させたい画面を設定するだけです。

contextの隣にmain.dartで設定した画面の名前を入れることで、その画面に遷移することができます。

まとめ

今回は「基本的な画面遷移のやり方を2パターン」ご紹介しました。

画面遷移はマルチスクリーンのアプリを開発する際には必須なので、しっかりと押さえておきましょう。

▼Flutterの効率的な勉強法を下記でご紹介しています。

【2022年版】Flutterの効率的な勉強法!具体的な手順を解説

本記事が参考になっていれば幸いです。

最後までご覧いただきありがとうございました。ではまた!

参考文献
Flutter関連の書籍を出版しました!