【Flutter】Navigatorで画面遷移|2つのスクリーン間を移動

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

Navigator.push()で別の画面に遷移し、Navigator.pop()で元の画面に戻る機能を実装します。

目次

事前準備|スクリーン(Wdget)の作成

今回はmain.dartScreen1Screen2の2つのWidgetを作り画面遷移していきます。

下コードのonPressedで画面遷移を実装します。

import 'package:flutter/material.dart';

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

//スクリーン1
class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen1'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Screen2'),
          onPressed: () {},
        ),
      ),
    );
  }
}

//スクリーン2
class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen2'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('Screen1'),
        ),
      ),
    );
  }
}

別ファイルでスクリーンを作成しインポートしてもOKです。

Navigator.pushで指定したスクリーンに移動

//Screen1からScreen2に画面遷移
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => const Screen2(),
    ),
  );
},

Navigator.pushメソッドで指定したスクリーン(Widget)に画面線します。

Navigator.popは前のスクリーンに戻る

//Screen2からScreen1に画面遷移(戻る)
onPressed: () {
  Navigator.pop(context);
},

Navigator.popでは画面遷移するスクリーンを指定せず、1つ前のスクリーンに戻ります。

サンプルコード

import 'package:flutter/material.dart';

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

//スクリーン1
class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen1'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Screen2'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const Screen2(),
              ),
            );
          },
        ),
      ),
    );
  }
}

//スクリーン2
class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen2'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Screen1'),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次