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 で画面遷移する際にデータを渡す方法を紹介しました！
以上で、【Flutter】データを渡して画面遷移する方法 は終わりです。