Flutter - Render widgets based on Cloud Firestore data [closed] - firebase

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I have a flutter ecommerce grocery app and I have some trouble in backend.
I have a products screen that has addtoCart function that adds that item to Cloud firestore as follows
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(),
});
}
This places products that have been added to cart as follows
cloud firestore image
Now the problem I am having it to take these products that I have added to firestore and render them in my carts screen which is subject to changes as user constantly adds them. How can I render them should I used SharedPrefs?

Answer 1

A quick solution would be the usage of StreamBuilder<T> which is able to listen for changes on Firestore and update your UI in in realtime.
// 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(),
);
},
);
While this is quick to implement, you'd better use a state management solution such as Bloc or Riverpod (or anything else).
In particular, the stream would be handled by the state management library internally which will rebuild the UI accordingly. In this way, you can also avoid undesired rebuilds, implement caching, filtering and much more.
Please note that I am not talking about performance because StreamBuilder<T> is very good. Instead, I'm saying that a state management library should take care of the stream for a better separation of concerns (which keeps the code easier to maintain).

Answer 2

I would recommend looking into using a StreamBuilder example this basically allows your app to listen to a collection in firebase and rebuild widgets whenever there is a change. This way you will never have to manually trigger a rebuild whenever a document in Firestore is created, updated, or deleted.