Flutter ChangeNotifierによるStreamの取得でConnectionState.waitingのエラーが発生する

Question

Flutter初心者です。

Firebaseを使用して、
メールアドレスによる認証を実装しており、
認証に成功したユーザーのマイページ閲覧画面、編集画面を作成しております。

FirebaseからユーザーIDの情報を取ってくるのに、
下記のApiを作成しました。

「AuthApi.dart」

class AuthApi {

  //connect Firebase
  final FirebaseAuth _auth = FirebaseAuth.instance;

  //create user obj based on FirebaseUser
  User _userFromFirebaseUser(FirebaseUser user) {
    return user != null ? User(uid: user.uid) : null;
  }

  //auth change user stream
  Stream<User> get user {
    return _auth.onAuthStateChanged.map(_userFromFirebaseUser);
  }
}

そして、ChangeNotifierで上記のuserを下記のように取得しています。

「MypageNotification.dart」

class MyPageNotification with ChangeNotifier {
  //get user stream
  Stream<User> user = AuthApi().user;
}

また、上記ChangeNotifierをMaterialRouteの上部に設置し、どのウィジェットも読み取れるようにしています。

マイページ閲覧画面とマイページ編集画面で取ってきたユーザーIDを使用し、
ユーザーIDに基づいた情報(名前等)を表示、編集しようと思っています。
下記は、閲覧・表示画面の実装の一部です。
ユーザーIDをStreamBuilderで取ってきて、それをusersInfo(IDを渡してユーザーの情報を取得)の引数として渡しています。

StreamBuilder<User>(
          stream: myPageNotification.user,
          builder: (context, user) {
            
            print(user);　// 編集画面のみ「AsyncSnapshot<User>(ConnectionState.waiting, null, null)」が表示される
            
            return user.data == null　// 編集画面のみ常にnullとなる
                ? Loading()
                : StreamBuilder<List<UsersInfo>>(
                    stream: myPageNotification.usersInfo(user.data.uid),
                    builder: (context, usersInfo) {
                      return Container(

閲覧画面ではこの実装方法で情報が正しく表示されるものの、
編集画面では、上記の「return user.data」の部分でnullが返却され、
print(user)の部分で
「AsyncSnapshot<User>(ConnectionState.waiting, null, null)」という値が表示されます。

しかし、「MypageNotification.dart」を下記のようにuserを二つに分けて、
閲覧画面と編集画面で別々にユーザーIDを取ってくるとうまく値が取得できます。

「MypageNotification.dart」

class MyPageNotification with ChangeNotifier {
  //get user stream
  Stream<User> userShow = AuthApi().user;
  Stream<User> userEdit = AuthApi().user;
}

上記方法で実装はできるのですが、なぜこのような現象になるのかわからず、ご教示いただければ幸いです。

また、Flutter初心者で実装方法が合っているか不確かで、マイページのようにユーザー情報を表示する画面ではどのようにChangeNotifierで値を渡しているのかご教示いただけると大変嬉しいです。
(ChangeNotifier以外でも良い方法があれば教えてください。。)

ご回答の程、よろしくお願いいたします！！

###追記 2020/02/22
ページの遷移にはNavigator.pushを使用し、
MaterialAppでルートを定義し、遷移しています。
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<MainNotification>(
            create: (_) => MainNotification()),
        ChangeNotifierProvider<MyPageNotification>(
            create: (_) => MyPageNotification()),
      ],
      child: const MaterialApp(
        debugShowCheckedModeBanner: false,
        initialRoute: '/',
        onGenerateRoute: Router.generateRoute,
      ),
    );
  }
}

Answer 1

※ 長くなったので、別の回答にしました

質問の内容を元に、ConnectionState.waitingのままになるコードを書いてみました。
閲覧画面側でStreamからデータを取得済みなので、編集画面側で再度Streamをlisten()してももうデータがこないため、waitingのままなんだと思います

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    login();
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<MyPageNotification>(
          create: (_) => MyPageNotification(),
        ),
      ],
      child: MaterialApp(
        title: 'Test',
        home: Scaffold(
          appBar: AppBar(),
          body: UserViewPage(),
        ),
      ),
    );
  }

  Future<void> login() async {
    if (await FirebaseAuth.instance.currentUser() == null) {
      await FirebaseAuth.instance.signInAnonymously();
    }
  }
}

class UserViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final myPageNotification = Provider.of<MyPageNotification>(context);
    return Container(
      child: Column(
        children: [
          StreamBuilder<User>(
            stream: myPageNotification.user,
            builder: (context, user) {
              return user.data == null
                  ? const CircularProgressIndicator()
                  : Text(user.data.uid);
            },
          ),
          RaisedButton(
            child: const Text('編集へ'),
            onPressed: () => Navigator.of(context).push(
              MaterialPageRoute<Widget>(
                builder: (context) {
                  return MultiProvider(
                    providers: [
                      ChangeNotifierProvider<MyPageNotification>.value(
                          value: myPageNotification),
                    ],
                    child: UserEditPage(),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class UserEditPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final myPageNotification = Provider.of<MyPageNotification>(context);
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Column(
          children: [
            StreamBuilder<User>(
              stream: myPageNotification.user,
              builder: (context, user) {
                print(user);

                return user.data == null
                    ? const CircularProgressIndicator()
                    : Text(user.data.uid);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class AuthApi {
  //connect Firebase
  final FirebaseAuth _auth = FirebaseAuth.instance;

  //create user obj based on FirebaseUser
  User _userFromFirebaseUser(FirebaseUser user) {
    return user != null ? User(uid: user.uid) : null;
  }

  //auth change user stream
  Stream<User> get user {
    return _auth.onAuthStateChanged.map(_userFromFirebaseUser);
  }
}

class MyPageNotification with ChangeNotifier {
  //get user stream
  Stream<User> user = AuthApi().user;
}

class User {
  User({this.uid});
  String uid;
}

修正版のコードを書いてみました。他にも実装方法は色々あると思いますが、自分が馴染みのあるStreamProviderを使った実装にしてみました。MaterialAppの前でStreamProviderでonAuthStateChangedをlistenするようにして、ユーザ情報が必要な箇所ではConsumerを使ってデータを取得するようにしています。
ChangeNotifierは使ってないので、消しました。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    login();
    return MultiProvider(
      providers: [
        StreamProvider<User>(
          create: (_) => AuthApi().user,
        ),
      ],
      child: MaterialApp(
        title: 'Test',
        home: Scaffold(
          appBar: AppBar(),
          body: UserViewPage(),
        ),
      ),
    );
  }

  Future<void> login() async {
    if (await FirebaseAuth.instance.currentUser() == null) {
      await FirebaseAuth.instance.signInAnonymously();
    }
  }
}

class UserViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final user = Provider.of<User>(context);
    return Container(
      child: Column(
        children: [
          Consumer<User>(
            builder: (context, user, _) {
              return user == null
                  ? const CircularProgressIndicator()
                  : Text(user.uid);
            },
          ),
          RaisedButton(
            child: const Text('編集へ'),
            onPressed: () => Navigator.of(context).push(
              MaterialPageRoute<Widget>(
                builder: (context) {
                  return MultiProvider(
                    providers: [
                      Provider<User>.value(value: user),
                    ],
                    child: UserEditPage(),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class UserEditPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Column(
          children: [
            Consumer<User>(
              builder: (context, user, _) {
                print(user);

                return user == null
                    ? const CircularProgressIndicator()
                    : Text(user.uid);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class AuthApi {
  //connect Firebase
  final FirebaseAuth _auth = FirebaseAuth.instance;

  //create user obj based on FirebaseUser
  User _userFromFirebaseUser(FirebaseUser user) {
    return user != null ? User(uid: user.uid) : null;
  }

  //auth change user stream
  Stream<User> get user {
    return _auth.onAuthStateChanged.map(_userFromFirebaseUser);
  }
}

class User {
  User({this.uid});
  String uid;
}

Comments

[mu-------]

MaterialAppの前でStreamProviderを使用するとエラーが表示されなくなりました！！！
何度も質問答えていただき、本当にありがとうございます。

Userと同じようにStreamをChangeNotifierで渡しているUsersInfoの方は、なぜかエラーも表示されずうまくいきました。。。
理解できていない部分も多くありますが、頑張って勉強します…！

丁寧なご説明、本当にありがとうございました！！！

[popobot]

うまくいってよかったです。自分も勉強になりました。もう少し、詳細なコードを教えてもらえば、早く解決できたとやや反省もしてます。

> Userと同じようにStreamをChangeNotifierで渡しているUsersInfoの方は、なぜかエラーも表示されずうまくいきました。。。

コードがないのでなんとも言えないですが、UsersInfo側のStreamは、StreamBuilderに渡す直前に生成されていて、各画面で別々のStreamになっているんじゃないかと思います。

後、Streamの管理部分だけをいえば、ChangeNotifierはあまり意味がない気もしました。

Answer 2

※ 以下の回答は正しくありませんでした。onAuthStateChangedのStreamにおいては該当しません。

---

最初の回答

通常StreamはStreamBuilder等で複数回listen()できません。
StreamController.broadcast()等~~asBroadcastStream~~を使って、BroadcastなStreamにすればできると思います。

以下の記事が詳しく書かれていたので、参考にするといいと思います。

Stream/Sinkを使いこなす！ Stream/RxDart初心者のためのBLoC入門 part2

---

また、Flutter初心者で実装方法が合っているか不確かで、マイページのようにユーザー情報を表示する画面ではどのようにChangeNotifierで値を渡しているのかご教示いただけると大変嬉しいです。

(ChangeNotifier以外でも良い方法があれば教えてください。。)

ChangeNotifierなどの、状態を管理するライブラリとしては、 providerを使うのが一般的だと思います。もしご存じなければ、調べてみてもいいかもしれません。

---

2020-02-22 追記

手元で検証したところ、onAuthStateChanged の Stream を複数回 listen しても問題なかったです。
以下、検証したコードを貼っておきます。

なお、以下のコードで、 userPage()をさらに増やしてホットリロードすると、ConnectionState.waitingのままになる現象が再現しました。ビルドし直すと直ります。発生している現象はこれかもしれないです。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      home: Scaffold(
        appBar: AppBar(),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  MyPageNotification myPageNotification = MyPageNotification();

  @override
  void initState() {
    super.initState();
    login();
  }

  Future<void> login() async {
    if (await FirebaseAuth.instance.currentUser() == null) {
      await FirebaseAuth.instance.signInAnonymously();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          userPage(),
          userPage(),
        ],
      ),
    );
  }

  Widget userPage() {
    return StreamBuilder<User>(
      stream: myPageNotification.user,
      builder: (context, user) {
        print(user);

        return user.data == null
            ? const CircularProgressIndicator()
            : Text(user.data.uid);
      },
    );
  }
}

class AuthApi {
  //connect Firebase
  final FirebaseAuth _auth = FirebaseAuth.instance;

  //create user obj based on FirebaseUser
  User _userFromFirebaseUser(FirebaseUser user) {
    return user != null ? User(uid: user.uid) : null;
  }

  //auth change user stream
  Stream<User> get user {
    return _auth.onAuthStateChanged.map(_userFromFirebaseUser);
  }
}

class MyPageNotification with ChangeNotifier {
  //get user stream
  Stream<User> user = AuthApi().user;
}

class User {
  User({this.uid});
  String uid;
}

Comments

[mu-------]

ご回答ありがとうございます！！

asBroadcastStreamを加えたのですが、まだうまくいきません。。。
下記二箇所に入れて試したのですが、入れる場所が間違っているでしょうか？？
お手数で本当に申し訳ないのですが、ご教示いただけると助かります。。

AuthApi.dartの下記部分

//auth change user stream
Stream<User> get user {
return _auth.onAuthStateChanged
.map(_userFromFirebaseUser)
.asBroadcastStream();
}

MypageNotification.dartの下記部分

//get user stream
Stream<User> user = AuthApi().user.asBroadcastStream();

[popobot]

asBroadcastStream()だとうまくいかないのかもです（非推奨という情報もありました...すみません）
https://stackoverflow.com/questions/53841750/flutter-stream-has-already-been-listened-to/55893532#55893532

この例のように BehaviorSubject を使えばできるかもです（RxDartを入れる必要がある）
もしくは、標準の StreamController.broadcast() でも大丈夫かもです

不確かな情報ですみません...

[mu-------]

情報ありがとうございます！！！
いえいえ、ご回答いただけるだけで嬉しいです！！！
すいません、StreamController.broadcastやBehaviorSubjectは今回のAuthApiのようにStream形で返却される箇所で使用できるのでしょうか？
いまいち今回の場合での使用方法がわからず、もしわかればご教示いただきたいです。。！
何度も質問してしまい申し訳ありません！！

[popobot]

> すいません、StreamController.broadcastやBehaviorSubjectは今回のAuthApiのようにStream形で返却される箇所で使用できるのでしょうか？

以下のような処理の流れで行けると思います。

// StreamControllerをbroadcastで宣言
StreamController<FirebaseUser> controller = StreamController<FirebaseUser>.broadcast();
// onAuthStateChangedをlistenしてStreamControllerにsinkする
FirebaseAuth.instance.onAuthStateChanged.listen((user) => controller.sink.add(user));
// StreamControllerのstreamは複数箇所でlisten()可能になる
Stream<FirebaseUser> broadcastStream = controller.stream;
// 不要になったらcloseする（disposeで）
controller.close();

以下の質問のコードも参考になろと思います
https://stackoverflow.com/questions/53841750/flutter-stream-has-already-been-listened-to

[popobot]

自分の手元でコードを動かしてみましたが、onAuthStateChangedを複数回listen()してもちゃんと、データが流れてきました。FirebaseのStreamは最初からbroadcastかもしれません。
検証に使ったコードを貼ったので、動かしてみてください。

そもそも以下のエラーも出ていないことを考えると、違う原因な気がしてきます。すみません。
Stream has already been listened to

手元の環境でも起動直後は、両方ともConnectionState.waitingが表示されますが、すぐにConnectionState.activeになりました。

手元でもホットリロードだとConnectionState.waitingのままになることがありましたが、ビルドし直してみてもダメでしょうか

[popobot]

後はFlutterやFirebaseのライブラリが最新かどうかなども確認するといいかもです。

[mu-------]

たくさん調べていただいて、大変恐縮です。。

ビルドし直すとは、スマホからアプリをアンインストールし、再度Android Studioでデバックボタンもしくは実行ボタンを押す、という操作で合っているでしょうか。
合っている場合、何度も試していますが、うまくいきません…。

ライブラリは最新であることを確認しております！

ページを増やすとは、どのように増やしているのでしょうか。
閲覧画面から編集画面へ、Navigator.pushを使用しているのですが、こちらに問題があるのでしょうか。。
追記致しましたので、見ていただければと思います。

何度もご対応いただき、本当にありがとうございます！！

[popobot]

ビルドし直しは、実行ボタンを押すことを意味しています。ホットリロードの問題ではなさそうですね

なるほど、先に閲覧画面でlisten()した後に、編集画面でlisten()しているんですね...
これだと閲覧画面で、すでにデータが取得されてしまっているので、編集画面ではデータがこないのかもしれません。

ChangeNotifierProviderとStreamBuilderの組み合わせがややうまく行ってない気がします。
MyAppでStreamProviderでStreamをlisten()するようにして、各画面ではConsumerでStreamの値を読めばいい気がします。

後で時間があったらサンプル書いてみようと思います。