I'm creating an grocery app in Flutter with firebase but i am unable show the updated cart value to text widget

Question

I'm creating an grocery app in Flutter with firebase but i am unable show the updated cart value to text widget.

This is my List view

var fire_storedb = FirebaseFirestore.instance.collection("vegetables").snapshots();


Container(
    margin: const EdgeInsets.only(top: 2),
    alignment: Alignment.center,
    child: StreamBuilder(
        stream: fire_storedb,
        builder: ((context, snapshot) {
          if (!snapshot.hasData) return const CircularProgressIndicator();
          return (ListView.builder(
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) {
              return (grocery_list(snapshot, index, context,values45));
            },
          ));
        })),
  ),

Below is my grocery_list function which is called from ListView ........

 Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                         children: [
        
                              InkWell(
                                  child: Icon(FontAwesomeIcons.minus),
                              onTap: () async {
                                String? grocery_id =
                                    snapshot.data?.docs[index].reference.id;
                                FirebaseFirestore.instance
                                    .collection("Cart")
                                    .where("grocery_id", isEqualTo: grocery_id)
                                    .get()
                                    .then((value) {
                                  value.docs.forEach((element) {
                                    FirebaseFirestore.instance
                                        .collection("Cart")
                                        .doc(element.id)
                                        .delete()
                                        .then((value) {
                                      print("Success!");
                                    });
                                  });
                                });
                              }),      //Inkwell for delete item from cart

                          VerticalDivider(width: 10,),    ////// Vertical Divider
                          


                          VerticalDivider(width: 10,),    ////// Vertical Divider
    
                          InkWell(
                            child: Icon(FontAwesomeIcons.plus),
                            onTap: () async {
                              SharedPreferences sharedPreferences =
                                  await SharedPreferences.getInstance();
                              var email =
                                  sharedPreferences.getString("email").toString();
                              String? docid =
                                  snapshot.data?.docs[index].reference.id;
    
                              Map<String, String?> data_to_save = {
                                "grocery_id": docid,
                                "quantity": "1",
                                "email": email,
                                "name": snapshot.data!.docs[index]['name'],
                                "price": snapshot.data!.docs[index]['price'],
                                "si": snapshot.data!.docs[index]['si'],
                                "image": snapshot.data!.docs[index]['image'],
                              };
                              var collectionRef = await FirebaseFirestore.instance
                                  .collection("Cart");
                              collectionRef.add(data_to_save);
                            },
                          ),        // Inkwell for add item to cart
                        ],
                      ),


   

I want to place the below code between the two vertical divider as a text wideget to show the no of items added to cart. Can someone help.? I'm able to get the cart value in cart_value but unable to display it to Text widget.

FirebaseFirestore.instance.collection("Cart").get().then((value) {
          value.docs.forEach((element) {
            FirebaseFirestore.instance.collection("Cart").doc(element.id).get().then((value2) => {
              if(value2.data()!['grocery_id']==docid)
                cart_value = (value2.data()['quantity'])
            });
          });
        });

Answer 1

You should be using a Future method to fetch data from Firestore and return an integer or double value of cart_value like this :

int cart_value = 0;
Future<int> cart() async {
  var cart = await FirebaseFirestore.instance.collection("Cart").get();
  for (var element in cart.docs) {
    FirebaseFirestore.instance.collection("Cart").doc(element.id).get().then((value2) => {
      if(value2.data()!['grocery_id']==docid){
        cart_value = (value2.data()!['quantity'])
      }

    });
  }
  return cart_value;
}

and put the Future method cart in the future of your FutureBuilder widget:

FutureBuilder(
                future: cart(),
                builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
                  if (snapshot.hasData) {
    return Text(snapshot.data!.toString());
    }})