【Flutter初心者用】画面間のデータの渡し方をシンプルにわかりやすく解説

こんにちは！文系プログラマーのいおです！

今回はFlutterでの画面遷移時に、前画面から次の画面へデータを受け渡す方法について具体的なプログラム例を用いて解説します。

はじめに

画面遷移の実装方法については下記記事を参考にしてみてください。

データの渡し方

Flutterの画面遷移は、「コンストラクタの引数としてデータを渡す」方法が一般的です。

コンストラクタとは

簡単に言うと、クラスがインスタンス化されたときに一番初めに実行される処理のことです。主にデータの初期化のために使用されます。

具体的なプログラム例

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const FirstPage(),
    );
  }
}

class FirstPage extends StatefulWidget {
  const FirstPage({super.key});

  @override
  State<firstpage> createState() => _FirstPage();
}

class _FirstPage extends State<firstpage>{
  String inputText = '';//渡す変数の定義

  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: const Text('First Page')),
      body: Center(
        child: Column(
          children: <widget>[
            SizedBox(
              width: double.infinity,
              child: TextFormField(
                onChanged: (value) {
                  setState(() {
                    inputText = value;//入力値を格納
                  });
                },
              ),
            ),
            ElevatedButton(
              onPressed: (){
                Navigator.push(context, MaterialPageRoute(builder: (context){
                  return CheckPage(inputText);//引数として入力値を渡す
                }),
                );
              },
              child: const Text('Check'),
            ),
          ],
        ),
      ),
    );
  }
}

class CheckPage extends StatelessWidget{
  final String value;//受け取る変数の定義
  CheckPage(this.value);//コンストラクタの定義

  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: const Text('Check Page')),
      body: Center(
        child: Column(
          children: <widget>[
            SizedBox(
              width: double.infinity,
              child: Text(value),
            ),
            ElevatedButton(
              onPressed:(){
                Navigator.pop(context);
              },
              child: const Text('back'),
            ),
          ],
        ),
      ),
    );
  }
}

First Page

「First Page」画面にTextFormFieldとElevatedButtonを配置しています。TextFormFieldに入力した値がElevatedButtonを押したときに次画面へ渡されます。下記に具体的な実装手順を書いています。

実装手順

①渡す変数を定義

String inputText = '';//渡す変数の定義

②TextFormFieldで入力した値を①に格納

onChanged: (value) {
                  setState(() {
                    inputText = value;//入力値を格納
                  });
                },

③ElevatedButtonのpush時に②を引数として渡す

onPressed: (){
                Navigator.push(context, MaterialPageRoute(builder: (context){
                  return CheckPage(inputText);//引数として入力値を渡す
                }),
                );
              },

Check Page

「Check Page」画面にはTextとElevatedButtonを配置しています。「First Page」で入力した値をTextに表示させています。下記に具体的な実装手順を書いています。

実装手順

①コンストラクタおよび受け取る変数の定義

final String value;//受け取る変数の定義
CheckPage(this.value);//コンストラクタの定義

②受け取った値の表示

Text(value),

おわりに

今回は、Flutterの画面遷移時にデータを次の画面に渡す方法について書きました。あなたのFlutter開発の一助になれば幸いです。

以上、最後までお読みいただきありがとうございました！