Flutter firestore items with favorite button. when i press the favorite button for an item it makes all the other items button to red also

Question

Screenshot

I want to press on the item favourite to toggle its favourite only not all the other items. I tried everything and I don't have any solution. I tried to create a stateful widget and put that piece of code into it but it didn't work. I don't have any solutions. What should I do to turn a specific item's button red?

Flexible(
            child:  StreamBuilder(
              stream: getRestaurantsbyAddress(context),
              builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
                if (address==null || snapshot.data == null) {
                  return Center(
                    child: CircularProgressIndicator()
                  );
                }
                else if (snapshot.data.size==0) {
                  return Center(
                    child: Text("No restaurants found",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20,color: Colors.white),),
                  );
                }
                return ListView(
                  children: snapshot.data.docs.map((document)
                  {
                    return Padding(
                      padding: EdgeInsets.all(10),
                      child: Container(
                          width: 200,
                          height: 70,
                          decoration:  BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            color: Colors.white,
                          ),
                          child: Row(
                            children: [
                              Padding(padding: EdgeInsets.only(left: 20),),
                              Text(document['name'],style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),),
                              Align(
                                alignment: Alignment.centerRight,
                                child: ButtonBar(
                                  children: [
                                    IconButton(icon: Icon(Icons.call),highlightColor: Colors.red,iconSize: 30.0,onPressed:() async {
                                      var url ="tel:"+document['number'].toString();
                                      if (await canLaunch(url)) {
                                        await launch(url);
                                      } else {
                                        throw 'Could not launch $url';
                                      }
                                    }),
                                    IconButton(icon: Icon(Icons.location_on_rounded), iconSize: 30.0,onPressed:() async {
                                      var url =document['location'];
                                      if (await canLaunch(url)) {
                                        await launch(url);
                                      } else {
                                        throw 'Could not launch $url';
                                      }
                                    }),
                                    IconButton(
                                      icon: Icon(Icons.favorite),
                                      color: favorite_color,
                                      iconSize: 30,
                                      onPressed: () {
                                        setState(() {
                                          if (favorite_color==Colors.grey) {
                                            favorite_color=Colors.red;
                                            CollectionReference users = FirebaseFirestore.instance.collection("users");
                                            users.doc(phone).collection("usersFav").doc(document['name']+" "+document['address']).set(
                                                {
                                                  "name" : document['name'],
                                                  "number" : document['number'],
                                                  "address":document['address'],
                                                  "location":document['location'],
                                                }
                                            );
                                          }
                                          else if (favorite_color==Colors.red) {
                                            setState(() {
                                              favorite_color=Colors.grey;
                                              CollectionReference favorites = FirebaseFirestore.instance.collection("users");
                                              favorites.doc(phone).collection("usersFav").doc(document['name']+" "+document['address']).delete();
                                            });
                                          }
                                        });
                                      },
                                    ),
                                  ],
                                ) ,
                              )
                            ],
                          )
                      ),
                    );
                  }).toList(),
                );
              },
            )
        )

Does someone has a solution?

Answer 1

You are using the common variable favorite_color to apply color to all of your items in the list. You should instead have unique variables for all the items.

Create a Map of <String, Color> type and populate it with your item's colors

Map<String, Color> favorite_colors = {};
(...)
@override
Widget build(BuildContext context) {
  ...
  return ListView(
    children: snapshot.data.docs.map((document)
    {
      //You should ideally fetch favorite status and assign the color accordingly
      Color favorite_color = favourite_colors[document['name']+" "+document['address']] ?? Colors.grey;
      // if the Map doesn't have any entry for this document then the default
      // color will be grey. You should therefore check if the item has already
      // been favorited using an async function and then give it a color
      (...)
      IconButton(
        icon: Icon(Icons.favorite),
        color: favorite_color,
        iconSize: 30,
        onPressed: () {
          setState(() {
            if (favorite_color==Colors.grey) {
              favourite_colors[document['name']+" "+document['address']] = Colors.red;
              ...
            } else {
              favourite_colors[document['name']+" "+document['address']] = Colors.grey;
            }
          });
        })
}