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

//「maind.dart」に画面転移先を全てインポートする

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

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

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

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

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

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

ティファ

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

//「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(),
      },
    ),
  );
}

//「screen2.dart」と「screen3.dart」をインポートする
import 'screen2.dart';
import 'screen3.dart';

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

//Navigator.pushNamed()の使い方

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

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

ティファ

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

//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('スクリーン２へ'),
              onPressed: () {
                Navigator.pushNamed(context, '/second');
              },
            ),
            ElevatedButton(
              child: Text('スクリーン３へ'),
              onPressed: () {
                Navigator.pushNamed(context, '/third');
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

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

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

//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);
          },
        ),
      ),
    );
  }
}

//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('スクリーン１へ'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}