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

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

データの受け取り方
1. StatelessWidget でデータを受け取る場合
2. StatefulWiWidget でデータを受け取る場合
データの渡し方
まとめ
参考

データの受け取り方

データを受け取る側は、 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】データを渡して画面遷移する方法 は終わりです。