Flutter 画面遷移について

Navigatorを使って画面遷移をする

Flutterにおいて画面遷移をする方法はいくつかありますが、今回は基本的なNavigato Widgetを使用した画面遷移の方法についてまとめてみます。

Navigatorとは？

Navigatorとは、Flutterにおける画面遷移を実現してくれるWidgetになります。

以下のように遷移したい画面を指定することで画面遷移をすることができます。

Navigator.push(context, MaterialPageRoute(builder: (context) => <遷移したい画面>));

以下の記述をすれば前の画面に戻る場合が出来ます。

Navigator.pop(context);

以下の例では、main.dartを書き換えて画面中央にボタンを表示し、ボタンを押した時にの画面へ遷移できるようにしています。
また、遷移先の画面でボタンが押されたら元の画面に戻るようにもしています。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("次の画面へ"),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => NextPage()));
          },
        ),
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Next Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("前の画面に戻る"),
          onPressed: () {
            // ここにボタンを押した時に呼ばれるコードを書く
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

ElevatedButton WidgetのonPressed()にNavigatorを設定します。
これでボタンが押されたNavigatorが動作します。
onPressed()にはボタンを押した時の処理を書きます。
今回はNextPage()に画面遷移する処理を、書いています。

  child: ElevatedButton(
     child: Text("次の画面へ"),
        onPressed: () {
            // ここにボタンを押した時に呼ばれるコードを書く
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => NextPage()));
        },
    ),

遷移先のNextPage()にも同じように、ElevatedButton WidgetのonPressedにNavigatorを設定しました。
これにより、一つ前の画面であるMyHomePage()に戻ることができます。

  child: ElevatedButton(
     child: Text("前の画面に戻る"),
        onPressed: () {
            Navigator.pop(context);
        },
    ),

まとめ

今回は画面遷移について簡単にまとめてみました。
非常に簡単に画面遷移させることができました。
最後までご覧いただきありがとうございました！