Flutter：将 FutureBuilder 与 StreamBuilder 结合使用

Question

我有一个屏幕，我需要先从 Firestore 获取 JSON 文件名，然后加载资产 JSON 文件。我通常将 StreamBuilder 用于 Firestore 文档快照，并且可以使用 FutureBuilder 加载 JSON。我的问题是如何将它们结合起来？或者，有没有更好的方法来做我提到的事情？

据我所知，FutureBuilder 无法在 StreamBuilder 中正常工作，所以我猜这不是一个选择。

我从 Firestore 获取快照：

  UserModel _userDataFromSnapshot(DocumentSnapshot snapshot) {
    final userdata = snapshot.data();
    return UserModel(
      ...
    );
  }

  Stream<UserModel> get userData {
    return userCollection.doc(uid).snapshots()
      .map(_userDataFromSnapshot);
  }

我将 JSON 加载为：

FutureBuilder(
  future: DefaultAssetBundle.of(context).loadString(fileName),
  builder: (context, snapshot) {
    if(snapshot.hasData) {
      final data = json.decode(snapshot.data.toString()).cast<String, dynamic>();
      ...

感谢任何帮助或评论。

Answer 1

您可以尝试使用一些状态管理来获取您的流，然后在从流中接收到数据后，获取 JSON。 我个人使用 Flutter Bloc，但如果您更喜欢 Riverpod 之类的其他产品，则取决于您。

如果您在使用 Flutter Bloc 实现 Stream 时遇到问题，这里有一个可能对您有所帮助的中等故事： https://arnaudelub.medium.com/flutter-bloc-and-firestore-stream-the-perfect-match-if-used-the-right-way-5a4607f093a2

集团流程是这样的：

yield* event.map(watchUserData: (WatchUserData _) async* {
      await _userDatasStreamSubscription?.cancel();
      _userDatasStreamSubscription = _repository.getUserData().listen(
          (Either<FirestoreFailure, UserData> data) =>
              add(UserDataEvent.userDataReceived(data)));
    }, userDataReceived: (UserDatasReceived data) async* {
      yield data.data.fold(
        (failure) => 
           UserDataState.userDataLoadFailure(failure),
        (success) {
           final jsonData = await _jsonRepository.loadStringFromFilename(filenam);
           UserDataState.userDataLoadSuccess(userData: success, jsonData: jsonData));
          }
    });

我正在使用 Dartz 插件中的 Either 来处理存储库中的故障，这就是为什么我在存储库的方法上使用 fold。