FutureProviderが正しい値を返してくれない

Question

下記のコードのようにRiverPodのFutureProviderを使用しており、FireBaseのAuthenticationの結果を受け取り、navigator.dartでその結果を利用したいと考えております。その利用結果が示す場所はhere3なのですが、ここでなぜか必ずAsyncData<bool>(value: false)でvalueとしてfalseを返してきてしまいます。
仮に下記のsample.dartにあるように、Future型を返すような関数であれば正しく動作してくれるのですが、FutureProviderを利用すると同じように期待する動作をしてくれません。

原因及び解決方法について、アドバイスをいただけると大変ありがたいです。
よろしくお願い申し上げます。

//auth.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:riverpod/riverpod.dart';

final authUser = FutureProvider<bool>((ref) async { //here1
          try {
          final FirebaseAuth auth = FirebaseAuth.instance;
          final UserCredential _result =
            await auth.createUserWithEmailAndPassword(
            email: emailController.text,
            password: maskController.text,
          );
           User _user = _result.user!; // 登録したユーザー情報
           _user.sendEmailVerification();
           return true;
        } on FirebaseAuthException catch (e) {
          if (e.code == 'email-already-in-use') {
            ref.read(completeErrorMessage.notifier).update((state) => awesomeText(icon: FontAwesomeIcons.lightbulb, text: 'EZ01:指定したメールアドレスは登録済みです',color: MyStyle.alertColor));
          } else if (e.code == 'invalid-email') {
            ref.read(completeErrorMessage.notifier).update((state) => awesomeText(icon: FontAwesomeIcons.lightbulb, text: 'EZ02:メールアドレスのフォーマットが正しくありません',color: MyStyle.alertColor));
          } else if (e.code == 'operation-not-allowed') {
            ref.read(completeErrorMessage.notifier).update((state) => awesomeText(icon: FontAwesomeIcons.lightbulb, text: 'EZ03:指定したメールアドレス・パスワードは現在使用できません',color: MyStyle.alertColor)); 
          } else if (e.code == 'weak-password') {
            ref.read(completeErrorMessage.notifier).update((state) => awesomeText(icon: FontAwesomeIcons.lightbulb, text: 'EZ04:パスワードは６文字以上にしてください',color: MyStyle.alertColor)); 
          } else if (e.code == 'network-request-failed') {
            ref.read(completeErrorMessage.notifier).update((state) => awesomeText(icon: FontAwesomeIcons.lightbulb, text: 'EZ05:通信環境を確認してください',color: MyStyle.alertColor)); 
          } else{
            ref.read(completeErrorMessage.notifier).update((state) => awesomeText(icon: FontAwesomeIcons.lightbulb, text: 'EZ10:予期しないエラーです、管理者へ問い合わせください',color: MyStyle.alertColor)); 
          }
          return false;
        }
});

//navigator.dart
import 'dart:developer';
import 'dart:ui';

import 'package:cards/control/auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class MyNavigator extends ConsumerWidget {
  final Widget destinationTo;
  final BuildContext context;
  final String goBack;
  final List<GlobalKey<FormState>>? formKeyList;

  MyNavigator(
      {required this.destinationTo,
      required this.context,
      required this.goBack,
      this.formKeyList,
      Key? key,
      required})
      : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final getResult = ref.watch(authUser);//here2
    // TextButton myNavigator(BuildContext context) {
    return TextButton(
      style: TextButton.styleFrom(
        foregroundColor: MyStyle.mainColor,
      ),
      onPressed: () {
        switch (goBack) {
          case "進む":
            for (var i = 0; i < formKeyList!.length; i++) {
              if (!(formKeyList![i].currentState!.validate())) {
                return;
              }
            }
            navigatorAnimation(
                context: context, goBack: goBack, destinationTo: destinationTo);
            break;
          case "戻る":
            navigatorAnimation(
                context: context, goBack: goBack, destinationTo: destinationTo);
            break;
          case "確認メールを送信する":
            print(getResult);//here3
            // getResult.then(
            //   (value) {
            //   if (value == false) {//catchでエラー側にthrowされた場合falseをreturnして、さらにここではreturnで処理が終了
            //     return;
            //   } else if (value == true) {// try -catchでエラーが非発生
            //     navigatorAnimation(
            //         context: context,
            //         goBack: goBack,
            //         destinationTo: destinationTo);
            //   }
            // });
            break;
        }
      },
      child: Text(goBack),
    );
  }
}

void navigatorAnimation(
    {required BuildContext context,
    required String goBack,
    required Widget destinationTo}) {
  Offset? begin;
  Navigator.of(context).push(
    PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return destinationTo;
      },
      transitionDuration: const Duration(milliseconds: 300),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        goBack == "進む" ? begin = const Offset(1.0, 0.0) : 0;
        goBack == "戻る" ? begin = const Offset(-1.0, 0.0) : 0;
        goBack == "確認メールを送信する" ? begin = const Offset(1.0, 0.0) : 0;
        const Offset end = Offset.zero;
        final Animatable<Offset> tween = Tween(begin: begin, end: end)
            .chain(CurveTween(curve: Curves.easeInOut));
        final Animation<Offset> offsetAnimation = animation.drive(tween);
        return SlideTransition(
          position: offsetAnimation,
          child: child,
        );
      },
    ),
  );
}

//sample.dart
Future<bool> authUser(ref) async {
        try {
          final FirebaseAuth auth = FirebaseAuth.instance;
          final UserCredential _result =
            await auth.createUserWithEmailAndPassword(
            email: emailController.text,
            password: maskController.text,
          );
           User _user = _result.user!; // 登録したユーザー情報
           _user.sendEmailVerification();
           return Future<bool>.value(true);
        } on FirebaseAuthException catch (e) {
          if (e.code == 'email-already-in-use') {
            ref.read(completeErrorMessage.notifier).update((state) => awesomeText(icon: FontAwesomeIcons.lightbulb, text: 'EZ01:指定したメールアドレスは登録済みです',color: MyStyle.alertColor));
          } else if (e.code == 'invalid-email') {
            ref.read(completeErrorMessage.notifier).update((state) => awesomeText(icon: FontAwesomeIcons.lightbulb, text: 'EZ02:メールアドレスのフォーマットが正しくありません',color: MyStyle.alertColor));
          } else if (e.code == 'operation-not-allowed') {
            ref.read(completeErrorMessage.notifier).update((state) => awesomeText(icon: FontAwesomeIcons.lightbulb, text: 'EZ03:指定したメールアドレス・パスワードは現在使用できません',color: MyStyle.alertColor)); 
          } else if (e.code == 'weak-password') {
            ref.read(completeErrorMessage.notifier).update((state) => awesomeText(icon: FontAwesomeIcons.lightbulb, text: 'EZ04:パスワードは６文字以上にしてください',color: MyStyle.alertColor)); 
          } else if (e.code == 'network-request-failed') {
            ref.read(completeErrorMessage.notifier).update((state) => awesomeText(icon: FontAwesomeIcons.lightbulb, text: 'EZ05:通信環境を確認してください',color: MyStyle.alertColor)); 
          } else{
            ref.read(completeErrorMessage.notifier).update((state) => awesomeText(icon: FontAwesomeIcons.lightbulb, text: 'EZ10:予期しないエラーです、管理者へ問い合わせください',color: MyStyle.alertColor)); 
          }
          return Future<bool>.value(false);
        }
}

Comments

[moriman]

解決方法とありますが、関数でできるのであれば「関数でやる」ということが解決方法のような気がします。

多分関数でやるのが一般的なやり方のような気がします(よく目にする、という意味で。)

質問は、FutureProviderで同じことをすることができるかどうかを知りたい、ということですかね?

[mako_0221]

コメント有難うございます。まだ、経験が浅く、FutureProviderを利用するしか実現できないと誤解していたのですが、関数でやるとはどのようなアプローチかぜひアドバイスを願えれば幸いです

[moriman]

https://codewithandrea.com/articles/flutter-presentation-layer/

典型的な認証(サインイン)フローでRiverpodを使っているので、ほぼ上記の記事の通りかと思います。
上記記事では匿名認証で、質問はユーザー登録ですが基本的には同じ流れ。
色々見てみましたが、とりあえず上記のやり方がオーソドックスなのでこれだけ押さえておけば良いのではないかと思います。

というか「Future型を返すような関数であれば正しく動作してくれるのですが」とあるので、関数を使ったらできた、ということではないんですかね?

いや、どちらでも良いのですが。

[mako_0221]

コメントありがとうございます。結論からすると題意が不明確でお詫びを申し上げます。
申し上げていた関数を利用することで、認証と画面遷移の動きは実現できております。
実はそこで動作を見たときに、「確認メールを送信する」ボタンをタップするとテンポが遅れて画面が遷移するために、CircularProgressIndicator()を描画する必要があるという問題に到達しておりました。
そこで、認証過程中にこれを表示するという問題に対して、諸々調べていたところ、FutureProviderで制御することが望ましいのかという地点に達し、CircularProgressIndicator()利用以前にFutureProviderがうまく実装できないというところでの質問でした。
そもそも、CircularProgressIndicator()でローディング中を表示するためにFutureProviderで実装することが適切ではないというご意見もあるのかもしれませんが、現状を改めて報告をさせていただきます。

Answer 1

実行できないので想像ですが。

1. まずはauthUserの動作が想定通り動いているかdebugPrint等でメッセージを出して調べるべき。
   ダイアログが表示されていないからfalseではないはずという理由なのかな

2. watchの利用上の注意としてUI操作時のFunctionやinitState等ではreadの方を使って下さいとあります。
   なのでonPressed内の関数で別途final getResult = ref.read(authUser);で取り出した情報を使うべきなのかもしれない。

3. FutureProviderの結果についてはthenではなくwhenでの処理を想定しているように見えます。つまりデータが未確定の状態があるということです。
   whenを考慮した実装にするべきでは。

   そしてonPressedの処理関数に関してgoBack == "確認メールを送信する"の時valueがtrue以外の場合nullにして押せないようにする。

   onPressed内ではvalueがtrueのはず(呼び出し可能な状態では)なのでgetResult.then(での判断は行わずnavigatorAnimationの呼び出しのみにする。

2番目のやつが理由なのかな？
使い方(実装方法)としては3番目が正しいように思える。

Comments

[mako_0221]

コメントをお寄せいただき御礼を申し上げます。加えてご返信が遅くなったことをお詫び申し上げます。
ご指摘いただいた内容を実際に自分のコードに組み込みながら試行錯誤を繰り返しているため、手を動かして理解を進めた上で改めてコメントをさせていただければ幸いです。
何卒、よろしくお願い申し上げます。
＊現状whenを利用すべきという点までは自分の理解がやっと追いついてきたところです・・・新たなことを学ぶのは地道で険しい道のりですが、Flutter & Dartは楽しいです！いつもご回答ありがとうございます。

[mako_0221]

一つやりながら理解が追いついてきた点がございます。コメントの#2に関連して以下のように実装しました。
onPressed:(){
case "確認メールを送信する":
final authC = ref.read(authProvider);
authC.when(
data: (data) {
if (data == true) {
navigatorAnimation();
} else {
return;
}
},
//error & loadingは一旦省略
);
}

すると確かにDocに記載があるようにreadは度だけproviderの変更を検知してくれます。ふむふむとなるほどと思ったのですが、例えば認証の過程でtry-catchで1回めにエラーにthrowされたとして2回目にユーザーが誤りに気づいて（例えばwifi非接続だった！*あくまで例えです。。。）正しい状態で改でonPressされたとしても、一回しか変更を検知しないため、初めにエラーに行ってfalseを返してしまっているので、print(data)の結果は常にfalseになってしまい、ユーザーは正しくwifiに接続したとしても、もう認証のステップに進ことができなくなってしまいます。（1回しかproviderを見に行かない結果、falseしか返さなくなってしまう）
これを解消するにはどうすれば良いのだろうと色々思考を巡らせていただのですが、最後にopPressed直後にref.refresh(authProvider);することで実装自体はできてしまいました。

これはできてしまうけれども、考え方やアプローチとして不適切でしょうか？

[mako_0221]

申し訳ございません、#3のポイントについては、どうしても半分理解ができませんでした。when()で実装することは理解できて、本件、上記のコメントの通り、whenで実装し直しております。valueがtrue以外の場合、それはつまりproviderがfalseを返してきた場合には（本件で言えば、認証の過程でerrorにthrowされた）ボタンを押せなくするということでしょうか？
onPressed:(){
case "確認メールを送信する":
final authC = ref.read(authProvider);
authC.when(
data: (data) {
if (data == true) {
navigatorAnimation();
} else {
//here true以外なのでこの場合ボタンを押せなくする？？
}
},
//error & loadingは一旦省略
);
}
//hereで記載はしていますが、実際にはボタンのdisabled化はonPressed自体をNullにしなくてはいけないので、ここのelseではなくてもっと上層で判定して分岐させなくてはならないということなのかと思いますが、その思考であっているのでしょうか？

ただ、falseになってしまうパターンでdisabled化してしまった場合、「あ、wifiに接続するのを忘れていたから接続してもう一回トライしてみよう」というユーザーに対して、再度タップして送信させることを不可能としてしまうように気がするのですが、いかがでしょうか？　発想が根本的ずれていたら申し訳ございません。

[ta.fu]

仕様を満たすのであればどのような実装であれ問題ないです。

ちなみに3に関してはTextButtonの構築部分でwhenを使うという意味です。onPressedの中で使うことは想定していません。
初期に提示されたコードでは"確認メールを送信する"の時にfalseだとreturnをしています。つまり押しても何もしないという意味ですね。そいう動作はUIとして敬遠されるものだと思ったため「押せない」というUIにするべきだと思い書きました。実装としては上記の場合onPressedをnullにする感じです。
データをどの段階で確認するのか、UIをどのように構築するのか、などについては「仕様」を満たすのであればどのような実装にするのも本人次第です。

次に「falseの場合に再接続をする」という仕様を盛り込むのはいいのですが、それに関して初期に提示された質問にはなにも書かれていないので回答にはその部分を盛り込めません。
後付けで追記されて、どうでしょうかと書かれても、そうですか、と返答するしかないです。

まあ、ボタン名を「再接続」などにして、onPressedで再接続処理をするというのもいいとは思いますが。

[mako_0221]

ta.fu様
おはようございます。なるほど、意図されている趣旨・仕様について理解することができました。
ユーザー目線でUIの構築をすべくもう一度その点は再構築して実装してみようと思います。
お力添えに重ねて御礼申し上げます。