Flutter — рендеринг виджетов на основе данных Cloud Firestore

У меня есть магазинное приложение для электронной коммерции, и у меня есть проблемы с серверной частью. У меня есть экран продуктов с функцией addtoCart, которая добавляет этот элемент в облачное хранилище следующим образом.

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(),
    });
  }

Это размещает продукты, которые были добавлены в корзину, следующим образом изображение облачного хранилища

Теперь проблема, с которой я сталкиваюсь, заключается в том, чтобы взять эти продукты, которые я добавил в firestore, и отобразить их на экране моей корзины, который может меняться, поскольку пользователь постоянно добавляет их. Как я могу отобразить их, если я использовал SharedPrefs?

Вы можете начать с здесь.

— 15.12.2020 15:14

firebase flutter dart google-cloud-firestore

15.12.2020 15:03

Интеграция Angular - Firebase Analytics

Узнайте, как настроить Firebase Analytics и отслеживать поведение пользователей в вашем приложении Angular.

242

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я бы порекомендовал изучить пример StreamBuilder , это в основном позволяет вашему приложению прослушивать коллекцию в firebase и перестраивать виджеты всякий раз, когда есть изменения. Таким образом, вам никогда не придется вручную запускать перестроение всякий раз, когда документ в Firestore создается, обновляется или удаляется.

15.12.2020 15:15

Быстрым решением будет использование StreamBuilder<T>, который может прослушивать изменения в Firestore и обновлять ваш пользовательский интерфейс в режиме реального времени.

// 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 (или что-то еще).

В частности, поток будет обрабатываться внутренней библиотекой управления состоянием, которая соответствующим образом перестроит пользовательский интерфейс. Таким образом, вы также можете избежать нежелательных перестроений, внедрить кэширование, фильтрацию и многое другое.

Обратите внимание, что я не говорю о производительности, потому что StreamBuilder<T> очень хорош. Вместо этого я говорю, что библиотека управления состоянием должна заботиться о потоке для лучшего разделения задач (что облегчает поддержку кода).

как я могу это сделать, если у меня есть несколько виджетов

— 15.12.2020 16:01

15.12.2020 15:30