使用 StreamBuilder 从 Firebase（实时数据库）Flutter 获取数据答案

【问题标题】：Get data from Firebase (Real Time Database) Flutter using StreamBuilder使用 StreamBuilder 从 Firebase（实时数据库）Flutter 获取数据
【发布时间】：2019-04-13 03:48:30
【问题描述】：

首先，我的 Firebase 结构如下所示：

我想获取例如 CCV 值并将其显示在我的应用 GUI 中，如下所示：

所有卡片条目都在我的代码中的一个名为 cardEntries() 的小部件中结构化，我认为我应该在那里构建我的 StreamBuilder 方法，但我不知道可以工作的结构良好的方法。

【问题讨论】：

FlutterFire repo 包含一个完整的示例，我经常从中复制一些内容。见github.com/flutter/plugins/blob/master/packages/…
@FrankvanPuffelen 不太有用，因为它非常复杂，我不完全理解那里的代码。需要更精确的东西。
没有看到您尝试过的内容，很难提供比任何示例/文档更好的帮助。

标签： firebase firebase-realtime-database flutter

【解决方案1】：

您可以使用类似于 BloC 模式的东西在 StreamBuilder 上实现 Firebase 实时数据库。

首先为您的卡片信息创建一个模型。您还可以在同一个类中包含 json 解析器。

class CardInfo{
  String? cvv;
  String? cardHolder;
  String? number;
  String? expiry;
  CardInfo({this.cvv, this.cardHolder,
      this.number, this.expiry});

  factory CardInfo.fromJson({required Map<dynamic,dynamic> json}){
    return CardInfo(
      cvv: json['CVV'],
      cardHolder: json['Card Holder'],
      number: json['Credit Card Number'],
      expiry: json['Expiry Date'],
    );
  }
}

在 Bloc 类中添加您的 Streams

class Bloc {
  final _repository = Repository();
  final _cardInfoFetcher = StreamController<CardInfo>.broadcast();
  
  /// The Stream that will be used on StreamBuilder
  Stream<CardInfo> get userCardInfo => _cardInfoFetcher.stream;

  fetchUserThreads(String? userId) async {
    var cardInfo = CardInfo();

    /// Query user card details
    var userCardDetails = FirebaseDatabase.instance.reference().child('Users').child(userId)
      .child('Card Info');

    /// Fetch user card details once
    var snapshot = await userCardDetails.once();

    Map<dynamic, dynamic> userCardSnapshot = snapshot.value;
    _cardInfoFetcher.sink.add(CardInfo.fromJson(json: userCardSnapshot));
  }

  /// Dispose Stream when not in use
  dispose() {
    _cardInfoFetcher.close();
  }
}
final bloc = Bloc();

每次调用bloc.fetchUserThreads(String) 时，StreamBuilder 都应该重新构建小部件。

StreamBuilder<CardInfo>(
  stream: bloc.userCardInfo,
  builder: (BuildContext context,
      AsyncSnapshot<CardInfo> snapshot) {
    if (!snapshot.hasData)
      debugPrint('Snapshot empty');
    else {
      debugPrint('Card Holder: ${snapshot.data!.cardHolder}');
    }
    /// You can now populate child widget with CardInfo data from the snapshot
    return Container();
  }
)

【讨论】：