Flutterで画面遷移する際に値を渡す方法

Flutterで画面遷移する際に値を渡す方法

通勤は自転車なのですが天気の良い日に外を走ると気持ちいいですよね。 コロナの影響で出勤時間にも制約がなくなったので、気持ち遅めに家を出るのがお気に入りです。電車で通勤する人たちとも被らないのが最高です。

さて、Flutterの理解を深めているところです。今回もタイトル通りの内容です。 画面遷移する際に値を渡してみます。 値が渡せるとできることの幅が広がりますからね。 例えば、ゲーム終了後にゲーム画面で表示していたスコアをResult画面で再度表示することに使えます。

それでは、早速進めていきましょう。

プロジェクトの作成と起動

フォルダを作りたい箇所から、コマンドプロンプトやTerminalから実行します。

$ flutter create transitionSample
$ cd transitionSample
$ flutter run

ボタンを押したら画面遷移する部分を作る

アプリケーションの立ち上げ部分を編集する

lib/main.dartを編集します。

import 'package:flutter/material.dart';

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

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

main関数からMyAppを呼び出し、アプリケーションの骨格を作ります。 home画面を形作るクラス名はFirstPage()にします。

FirstPageから画面遷移するボタンを作ります。

先程書いたコードの下にホーム画面用のクラスを作ります。

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FirstPage'),
      ),
      body: Center(
        child: RaisedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) {
                  return SecondPage();
                }),
              );
            },
            child: Text('Next Page')),
      ),
    );
  }
}

RasisedButton()で画面中央にボタンを設置します。 ボタンが押された処理を書くためにonPressedを用意します。 ボタンが押されたときに、Naigator.pushが呼び出され、SecondPage()が呼び出されます。

呼び出される先の画面を用意する。

遷移先の画面を作ります。中身は遷移元のクラスをベースにしています。 ボタンが押されたときの処理が、Navigator.pop()となっています。

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SecondPage'),
      ),
      body: Center(
        child: RaisedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('Go back')),
      ),
    );
  }
}

ちなみに,Naigator.push()が呼ばれるとAppBarに戻るボタンが追加されます。 この戻るボタンはNavigator.pop()と同じ動きをします。

アプリの実行結果

こんな画面が出ます。

Next Pageボタンを押すとこのような画面が表示されます。

これで一通りの画面遷移が出来上がりました。

モーダル遷移を行う方法

モーダル遷移についても少し書いておきます。 FirstPageのonPressedの中を少し書き換えるだけなのです。

            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) {
                    return SecondPage();
                    }
- )                
+               ,fullscreenDialog: true ),
              );
            },

SecondPageの上部が戻るボタンではなく☓ボタンになっています。

画面遷移について

WEB系開発から程遠い生活を送ってきたので、モーダル遷移ってなんぞや？？？となった次第です。

調べてみると、画面の表示方法は大別すると3種類ほどあるようです。

参考にさせていただいた記事。 Qiita プッシュ遷移,モーダル遷移の区別

画面間のデータ受け渡しについて

前置きが非常に長くなりましたがここからが本題です。

結論から述べますとページや画面自体はWidgetのため、インスタンスとして生成されるときにコンストラクタで値を渡してあげれば実装できます。

            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) {
- return SecondPage();
+                  return SecondPage('ウマ娘プリティーダービー');
                }),
              );
            },

渡された値を受け取る部分を書いていきます。 とりあえず動きがわかれば良いのでtmpを変数を定義します。

class SecondPage extends StatelessWidget {
+  final String uma;
+  SecondPage(this.uma); //値を受け取るところ。
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SecondPage'),
      ),
      body: Center(
+        child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
              RaisedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text('Go back')),
+              Text(uma) //受け取った値を表示するところ
            ]),
      ),
    );
  }
}

まとめ

Flutterでできることが少しずつですが増えてきましたね。 今回は前回までと違ってチュートリアルみたいなものも無いですのでシンプルにしたつもりですがどうでしょうか。 この記事が誰かの役に立てば幸いです。