Flutter - 基于 Cloud Firestore 数据渲染小部件 [关闭]答案

【问题标题】：Flutter - Render widgets based on Cloud Firestore data [closed]Flutter - 基于 Cloud Firestore 数据渲染小部件 [关闭]
【发布时间】：2021-03-26 04:20:59
【问题描述】：

我有一个颤振的电子商务杂货应用程序，但我在后端遇到了一些问题。我有一个具有 addtoCart 功能的产品屏幕，该功能将该项目添加到 Cloud firestore，如下所示

Future<void> _addToCart(final uid,
      String title,
      String price,
      int unit,
      int total,) {
    CollectionReference cart = FirebaseFirestore.instance.collection(
        'users/$uid/cart');
    return cart
        .doc(title)
        .set({
      'title': title,
      'price': price,
      'unit': unit,
      'total': total,
      'order_status': 'in_cart',
      'order_placed_time': DateTime.now(),
    });
  }

这会将已添加到购物车的产品按如下方式放置 cloud firestore image

现在我遇到的问题是将这些产品添加到 Firestore 并将它们呈现在我的购物车屏幕中，随着用户不断添加它们，这些产品可能会发生变化。如果使用 SharedPrefs，我该如何渲染它们？

【问题讨论】：

您可以从here开始。

标签： firebase flutter dart google-cloud-firestore

【解决方案1】：

一个快速的解决方案是使用StreamBuilder<T>，它能够监听 Firestore 上的变化并实时更新您的 UI。

// Define this somewhere
final firestoreStream = Firestore
  .instance
  .collection('abc')
  .snapshots();

// Then in the 'build' method
StreamBuilder<QuerySnapshot>(
  stream: firestoreStream,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return const SomeWidget();
    }

    if (snapshot.hasError) {
      return const ErrorWidget();
    }

    return const Center(
      child: CircularProgressIndicator(),
    );
  },
 );

虽然这可以快速实施，但您最好使用状态管理解决方案，例如 Bloc 或 Riverpod（或其他任何东西）。

特别是，流将由内部状态管理库处理，该库将相应地重建 UI。通过这种方式，您还可以避免不必要的重建、实现缓存、过滤等等。

请注意，我不是谈论性能，因为StreamBuilder<T> 非常好。相反，我是说状态管理库应该处理流以便更好地分离关注点（这使代码更易于维护）。

【讨论】：

如果我有多个小部件，我该怎么做

【解决方案2】：

我建议考虑使用 StreamBuilder example 这基本上可以让您的应用在 Firebase 中侦听集合并在发生更改时重建小部件。这样一来，无论何时创建、更新或删除 Firestore 中的文档，您都无需手动触发重建。

【讨论】：