【flutter】複数画面にわたって収集する情報を一時保管したい

Question

新規ユーザーの登録ページを作成しているのですが、
ページAではユーザー名、性別、誕生日などをTextFiledなどで収集し、
ページBでは他の情報を収集、
最後にページCでA〜Cにて収集した情報をまとめて一気にFireStoreに保存したいのですが、
どういう方法がありますか？

・ページ移動の際に情報を常に引き渡しする
などが考えられると思うのですが、ページBからAに戻る際（Navigator.pop()）に渡し方が分からなかったりで、
どういう方法がベストか教えていただきたいです。

Answer 1

Providerを使って書いてみました。
イメージとしては、ChangeNotifierを継承したInfoStore君にずっと情報(状態)を持っておいてもらって、
必要なときにそれを引き出すと言った感じですね。
もっと良いやり方・書き方があるかもしれませんが、この方法で困った経験はあまりないです。

main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(ChangeNotifierProvider(
    create: (_) => InfoStore(),
    child: const MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterLabo',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const FirstPage(
        title: 'FirstPage',
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Consumer<InfoStore>(builder: (_, infoStore, __) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              children: [
                const Text('メアドを入力'),
                TextFormField(
                    onChanged: (String newValue) =>
                        infoStore.changeMail(newValue)),
                Text(
                  infoStore.mailError,
                  style: const TextStyle(color: Colors.red),
                )
              ],
            ),
          ],
        );
      }),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push<void>(
              context,
              MaterialPageRoute(
                builder: (context) => const SecondPage(),
              ));
        },
        child: const Icon(Icons.arrow_forward),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SecondPage'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          const Text('住所を入力'),
          TextFormField(
              onChanged: (String newValue) =>
                  context.read<InfoStore>().changeAddress(newValue)),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push<void>(
              context,
              MaterialPageRoute(
                builder: (context) => const ThirdPage(),
              ));
        },
        child: const Icon(Icons.arrow_forward),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  const ThirdPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ThirdPage'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('今までの入力データ'),
          Text(context.read<InfoStore>().mail),
          Text(context.read<InfoStore>().address),
          const Text('性別を入力'),
          TextFormField(
              onChanged: (String newValue) =>
                  context.read<InfoStore>().changeGender(newValue)),
          ElevatedButton(
              onPressed: () {
                print('メアド');
                print(context.read<InfoStore>().mail);
                print('住所');
                print(context.read<InfoStore>().address);
                print('性別');
                print(context.read<InfoStore>().gender);
              },
              child: const Text('ファイアストアに情報を送る'))
        ],
      ),
    );
  }
}

class InfoStore with ChangeNotifier {
  String mail = '';
  String address = '';
  String gender = '';
  //validationしたい時に使う
  String mailError = '';

  //TextFormFieldが変更された時に行う処理
  void changeMail(String newValue) {
    mail = newValue;
    mailError = validateMail(newValue);
    notifyListeners();
  }

  void changeAddress(String newValue) {
    address = newValue;
    notifyListeners();
  }

  void changeGender(String newValue) {
    gender = newValue;
    notifyListeners();
  }

  String validateMail(String newValue) {
    if (!mail.contains('@')) {
      return '@が含まれていません';
    } else {
      return '';
    }
  }
}

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  provider: ^6.0.0

Comments

[OSARU_2020]

回答いただきありがとうございました！
参考にして作ってみたのですが上手く行かずでした、、

FirstPageはConsumerで囲んでいるのですが、それ以降のページは故意的に囲んでいないのでしょうか？
全ページにChangeNotifierProviderとConsumerで囲んでみたのですが、それでも最後のページの情報しかFireStoreに登録できなかったです。。

[flutter_labo]

Consumerで囲んでいないのは意図的で、その部分での画面の再構築が不必要だと判断したからです。
それと、FirstPageのみでConsumerを使った理由は、infoStore.mailErrorを再構築して表示させたかったからです。
あと、ChangeNotifierProviderを全ページで使うのはダメです。私のコードで言うと、InfoStoreのインスタンスが複数個できてしまうことになるからです。(createではなくvalueにすればいけそうですが)

というわけでまずは、ChangeNotifierProviderをmain関数内で一度だけ使用するようにしてみて下さい(私のコードが参考になるかと思います)