【Flutter】Navigator.push｜2つのスクリーン間で画面遷移

2022年12月23日

こんにちは、フラメルです。

今回は2つのスクリーン間を画面遷移させる方法を紹介します。

下準備

今回は下記コードのホーム画面であるFirstRouteと2つ目の画面SecondRouteで画面遷移させるコードを書いていきます。

import 'package:flutter/material.dart';

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

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('スクリーン1'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('スクリーン2へ'),
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('スクリーン2'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('戻る'),
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

ステップ１：ホーム画面から別画面に遷移

ElevatedButton(
  child: Text('スクリーン2'),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SecondRoute(),
      ),
    );
  },
),

任意のスクリーンに画面遷移するにはNavigator.pushを使用し上記コードのように書きます。

ステップ２：前画面に戻る

ElevatedButton(
  child: Text('戻る'),
  onPressed: () {
    Navigator.pop(context);
  },
),

前画面に戻るにはNavigator.popを使用し上記コードのように書きます。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(home: FirstRoute()),
    );

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('スクリーン1'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('スクリーン2'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondRoute(),
              ),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('スクリーン2'),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('戻る'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

以上です。

参考リンク

https://docs.flutter.dev/cookbook/navigation/navigation-basics