【Flutter】２つのスクリーン間での画面遷移を実装

2022 4/05

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

今回は「Navigator.push()」「Navigator.pop()」を使って２画面での画面遷移をする方法を解説します。

Navigator.push()｜ホーム画面からの画面遷移

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const Screen2()),
);

ホーム画面から別のスクリーンに画面遷移する場合は「Navigator.push」を使用します。

「Screen2()」に遷移先のWidgetを指定します。

//完成ソース（Screen1）
class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ホーム'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Go'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const Screen2()),
            );
          },
        ),
      ),
    );
  }
}

Navigator.pop()｜画面遷移先からホームに戻る

Navigator.pop(context);

遷移先からホーム画面に戻るにいは「Navigator.pop」を使用します。

//完成ソース（Screen2）
class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('スクリーン２'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Back'),
        ),
      ),
    );
  }
}

完成コード

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

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

void main() => runApp(MaterialApp(home: Screen1()));

class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ホーム'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Go'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const Screen2()),
            );
          },
        ),
      ),
    );
  }
}

class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('スクリーン２'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Back'),
        ),
      ),
    );
  }
}

以上です。