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

【Flutter】2つ以上のスクリーンでの画面遷移 | Navigator.pushNamed()の実装
本記事で分かること

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

本記事ではFlutter公式サイトの「Navigate with named 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つ以上のスクリーンでの画面遷移の方法を紹介していくよ!

目次

下準備

今回はスクリーン3つを使った画面遷移の方法を紹介していくので、分かりやすいようにそれぞれのスクリーンごとにDartファイルを用意してプログラムを作っていきます。

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

ティファ

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

「main.dart」にコピペ

  • Dartファイル名:main.dart
  • MaterialAppを実装済み
// main.dartファイルの初期コード

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(),
  );
}

「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"),
        backgroundColor: Colors.red,
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              child: Text('スクリーン2へ'),
              onPressed: () {},
            ),
            ElevatedButton(
              child: Text('スクリーン3へ'),
              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(
          child: Text('スクリーン1へ'),
          onPressed: () {
          },
        ),
      ),
    );
  }
}

「screen3.dart」にコピペ(Screen3)

  • Dartファイル名:screen3.dart
  • クラス名:Screen3
// screen3.dartファイルの初期コード

import 'package:flutter/material.dart';

class Screen3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("スクリーン3"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('スクリーン1へ'),
          onPressed: () {
          },
        ),
      ),
    );
  }
}
ティファ

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

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

Screen1
Screen2
Screen3

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

ティファ

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

「MaterialApp」で画面遷移先のスクリーンを定義する

「Navigator.pushNamed()」を使って画面遷移する場合は「MaterialApp」で画面遷移するスクリーンをまず初めに定義する必要があります。

STEP
「main.dart」に画面転移先のファイルを全てインポートする
//「maind.dart」に画面転移先を全てインポートする

import 'screen1.dart';
import 'screen2.dart';
import 'screen3.dart';

画面遷移先のクラスがあるDartファイルを全てインポートします。

STEP
「MaterialApp」で画面遷移するスクリーンを定義する
//MaterialAppでの画面遷移先の定義の仕方
    MaterialApp(
      initialRoute: '/', //初期画面となるスクリーンのキー
      routes: {
        '/': (context) =>初期画面となるクラス名(),
        '/キー2': (context) => 画面遷移先のクラス名2(),
        '/キー3': (context) => 画面遷移先のクラス名3(),
      },
    ),

//maind.dartのMaterialAppにコピペ
    MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => Screen1(),
        '/second': (context) => Screen2(),
        '/third': (context) => Screen3(),
      },
    ),

「initialRouteプロパティ」と「homeプロパティ」は同時に使えないので「Navigator.pushNamed()」で画面遷移する場合は「initialRouteプロパティ」だけを使うようにしましょう。

MaterialAppの「routesプロパティ」で画面遷移先を上記のコードのように定義します。また「initialRouteプロパティ」で初期画面となるスクリーンを「キー」を使用して指定します。

ティファ

キーを定義する際は必ず「/」から始めるようしてください。また、今回はScreen1のキーを「/」としているけど「/first」のように名付けても大丈夫だよ!

STEP
「main.dart」の最終コード
//「main.dart」の最終コード
 
import 'package:flutter/material.dart';
import 'screen1.dart';
import 'screen2.dart';
import 'screen3.dart';

void main() {
  runApp(
    MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => Screen1(),
        '/second': (context) => Screen2(),
        '/third': (context) => Screen3(),
      },
    ),
  );
}
ティファ

画面遷移先をMaterialAppで定義できたら、次は画面遷移プログラムを「Navigator.pushNamed()」で実装していくよ!

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

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

STEP
Screen1に画面遷移先のクラスをインポートする
//「screen2.dart」と「screen3.dart」をインポートする
import 'screen2.dart';
import 'screen3.dart';

画面遷移先のクラスをがあるファイルをインポートします。

STEP
Navigator.pushNamed()で画面遷移させる
//Navigator.pushNamed()の使い方

onPressed: () {
  Navigator.pushNamed(context, 'キー'); //MaterialAppで定義したキーを使って画面遷移先を指定します。
}

「Navigator.pushNamed()」で画面遷移先を指定するには上のコードのように「MaterialApp」の「initialRouteプロパティ」で定義した「キー」を使用します。

ティファ

Screen1に2つある「ElevatedButton」で「Screen2」と「Screen3」の画面遷移プログラムを実装してみましょう!

STEP
「screen1.dart」の最終コード
//main.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: Column(
          children: [
            ElevatedButton(
              child: Text('スクリーン2へ'),
              onPressed: () {
                Navigator.pushNamed(context, '/second');
              },
            ),
            ElevatedButton(
              child: Text('スクリーン3へ'),
              onPressed: () {
                Navigator.pushNamed(context, '/third');
              },
            ),
          ],
        ),
      ),
    );
  }
}
ティファ

これでScreen1(初期画面)から別のスクリーンへ画面遷移できるようになりました!次は別のスクリーンから初期画面へ戻る方法をメインに紹介していきます。

「Navigator.pop」で初期画面(Screen1)に画面遷移させる

画面遷移先から「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);
          },
        ),
      ),
    );
  }
}
STEP
「screen3.dart」の最終コード
//screen3.dartの最終コード

import 'package:flutter/material.dart';

class Screen3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("スクリーン3"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('スクリーン1へ'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}
ティファ

これで2つ以上のスクリーンでの画面転移プログラムを実装できました。また、2つのスクリーン間で画面遷移をしたい方はこちらの記事をお読みください!

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

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

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

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

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