【Flutter】データを渡して画面遷移する方法 | ヒヨコ プログラミング(ヒヨプロ)

【Flutter】データを渡して画面遷移する方法

Flutter

Flutter で画面遷移するときに、データを受け渡す方法を紹介します。
画面遷移の基本については、以下の記事をご参照ください。

データの受け取り方

データを受け取る側は、 StatelessWidget の場合と StatefulWidget の場合とで少し異なる点があるので、それぞれで見ていきます。

StatelessWidget でデータを受け取る場合

まず、遷移先つまりデータの受け取り先が StatelessWidget の場合についてです。

以下の2点で、画面遷移元からデータを受け取れるようになります。

  • 画面遷移元からのデータを受け取るための変数を用意
    (以下の例では、3行目)
  • 引数付きのコンストラクタを用意し、
    引数として来た値の受け取り先として用意した変数を指定
    (以下の例では、6行目)
class NextPage extends StatelessWidget {
  // 画面遷移元からのデータを受け取る変数
  final int value;

  // コンストラクタ
  const NextPage({Key? key, required this.value}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      … ,  // 省略
    );
  }
}

StatefulWiWidget でデータを受け取る場合

次に、遷移先つまりデータの受け取り先が StatefulWidget の場合についてです。

StatefulWidget も StatelessWidget と基本は同じです。
画面遷移元からのデータを受け取る変数と引数付きコンストラクタを用意しましょう。
受け取ったデータは、widget.変数名 の形で使用できます。(以下の例では、21行目)

さらに、画面遷移元から受け取ったデータを StatefulWidget の状態を管理する変数に格納したい場合は、initState() 内で行います。(以下の例では、21行目)

class NextPage extends StatefulWidget {
  // 画面遷移元からのデータを受け取る変数
  final int value;

  // コンストラクタ
  const NextPage({Key? key, required this.value}) : super(key: key);

  @override
  State<NextPage> createState() => _NextPageState();
}

class _NextPageState extends State<NextPage> {
  // 状態を管理する変数
  late int state;

  @override
  void initState() {
    super.initState();

    // 受け取ったデータを状態を管理する変数に格納
    state = widget.value;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      … ,  // 省略
    );
  }
}

データの渡し方

データを渡す側は、画面遷移先が Stateless か Stateful かは関係ありません。

以下のように、画面遷移先を指定する際に、渡すデータを引数に指定することで、画面遷移先にデータを渡すことができます。

Navigator.push(
  context, 
  MaterialPageRoute(builder: (context) => NextPage(value: 100)),
);

まとめ

Flutter で画面遷移する際にデータを渡す方法を紹介しました!

  • データ受信側(画面遷移先)
    • データを受け取るための変数と、引数付きコンストラクタを用意することで、
      画面遷移元からデータを受け取ることができます。。
    • StatefulWidget で受け取ったデータは、widget.変数名 の形で使用することができます。
  • データ送信側(画面遷移元)
    • 画面遷移先の指定時に、渡すデータを引数に指定することで、
      画面遷移先にデータを渡すことができます。

以上で、【Flutter】データを渡して画面遷移する方法 は終わりです。

参考

コメント

  1. RAY より:

    非常にわかりやすいです!ありがとうございます!!

タイトルとURLをコピーしました