How to listen to stream and update Flutter GridView builder accessing Firebase

Question

I need an example code in which a Flutter Gridview builder streams Firebase data (for example with a single Collection and multiple Documents with multiple fields in each) that can be modified by the user straight from the Gridview

I've watched this tutorial => https://www.youtube.com/watch?v=ErP_xomHKTw Although it shows how to access and modify data from Firebase I still can't wrap my head around the Firebase and Gridview builder interaction.

Answer 1

Stream Builder using GridView

StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance.collection('products').snapshots(),
    builder: (context, snapshot) {
        if (snapshot.hasData) {
        return  GridView.builder(
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20),
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) {
                DocumentSnapshot doc = snapshot.data!.docs[index];
                return Column(
                       children:[
                           Text(doc['name']),
                           Text(doc['price']);
                       );
              );
            }),
        } else {
        return Text("No data");
        }
    },
)

---

Stream Builder using ListView

StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance.collection('products').snapshots(),
    builder: (context, snapshot) {
        if (snapshot.hasData) {
        return ListView.builder(
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) {
                DocumentSnapshot doc = snapshot.data!.docs[index];
                return Column(
                       children:[
                           Text(doc['name']),
                           Text(doc['price']);
                       );
            });
        } else {
        return Text("No data");
        }
    },
)