【Flutter】2つ以上のスクリーンでの画面遷移の実装

2022 4/05

2021年7月16日 2022年4月5日

今回は「Navigator.pushNamed()」を使って２スクリーン間以上での画面遷移をする方法を解説します。

MaterialAppで「initialRoute」「routes」を指定

MaterialApp(
  //ホーム画面を指定
  initialRoute: '/', 
  
  //スクリーンパスを作成
  routes: {
    '/': (context) => const Screen0(),
    '/screen1': (context) => const Screen1(),
    '/screen2': (context) => const Screen2(),
  },
),

MaterialAppのroutesでホーム画面・遷移画面のパスを作成し、initialRouteでホーム画面を指定します。今回は「Screen0」をinitialRouteで指定しています。

指定したパスに画面遷移させる｜Navigator.pushNamed()

Navigator.pushNamed(context, 'スクリーンパス');

Navigator.pushNamed()に先ほど作成したスクリーンパスを使用して画面遷移させます。

//完成ソース（Screen0）
class Screen0 extends StatelessWidget {
  const Screen0({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('スクリーン０'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const SizedBox(
            width: double.infinity,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, '/screen1');
            },
            child: const Text('スクリーン１'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, '/screen2');
            },
            child: const Text('スクリーン2'),
          ),
        ],
      ),
    );
  }
}

Screen1とScreen2も同様に作業を行います。

完成コード

これで２スクリーン以上での画面遷移の実装は完了です。

//完成ソース
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => const Screen0(),
        '/screen1': (context) => const Screen1(),
        '/screen2': (context) => const Screen2(),
      },
    ),
  );
}

class Screen0 extends StatelessWidget {
  const Screen0({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('スクリーン０'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const SizedBox(
            width: double.infinity,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, '/screen1');
            },
            child: const Text('スクリーン１'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, '/screen2');
            },
            child: const Text('スクリーン2'),
          ),
        ],
      ),
    );
  }
}

class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('スクリーン１'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const SizedBox(
            width: double.infinity,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, '/');
            },
            child: const Text('スクリーン0'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, '/screen2');
            },
            child: const Text('スクリーン2'),
          ),
        ],
      ),
    );
  }
}

class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('スクリーン２'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const SizedBox(
            width: double.infinity,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, '/');
            },
            child: const Text('スクリーン0'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, '/screen1');
            },
            child: const Text('スクリーン1'),
          ),
        ],
      ),
    );
  }
}

以上です。