如何在 Flutter 中创建一个赞按钮？

Question

This is my custom widget

Widget productlist({@required String img, @required IconButton likebtn}) {
return Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
  ),
  elevation: 10.0,
  child: InkWell(
    onTap: () {},
    child: Container(
      height: 190.0,
      width: MediaQuery.of(context).size.width * 0.43,
      child: Stack(
        children: [
          Image(
            height: 95.0,
            width: 200.0,
            fit: BoxFit.fill,
            image: AssetImage(img),
          ),
          Positioned(
            top: 89.0,
            left: 115.0,
            child: likebtn,
          ),
          Positioned(
            top: 97.0,
            left: 5.0,
            child: Text(
              "Name",
              style: TextStyle(
                fontSize: 24.0,
              ),
            ),
          ),
          Positioned(
            top: 128.0,
            left: 5.0,
            child: Text(
              "Description",
              style: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.w600,
                color: Colors.grey,
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);

}

Now I am calling this custom widget like this in my body..

productlist(
                img: "assets/images/demo6.png",
                likebtn: IconButton(
                  onPressed: () {
                    setState(() {
                      liked = !liked;
                    });
                  },
                  icon: Icon(liked
                      ? Icons.thumb_up_alt_outlined
                      : Icons.thumb_up_alt_rounded),
                ),
              ),
              productlist(
                img: "assets/images/demo7.png",
                likebtn: IconButton(
                  onPressed: () {
                    setState(() {
                      liked = !liked;
                    });
                  },
                  icon: Icon(liked
                      ? Icons.thumb_up_alt_outlined
                      : Icons.thumb_up_alt_rounded),
                ),
              ),

I have declared a bool value so I can use it but since I am using same bool value for all so if I press like button in one widget then it works in other widget too. For example if I like one photo then all photos gets liked.. Do I have to declare different bool values for all widgets differently like list maybe?? What if I have 100 widgets like this? In that situation 100 bool values would be mess code!!

Answer 1

Make sure all your photos have a unique ID and then create a List for all the liked photos

 List<String> likedPhotos = [];

Photo Icon

Icon: likedPhotos.contains(photo.id)? LikedIcon : UnLikedIcon

OnLikedPhotoTap

likedPhotos.add(photo.id)

OnUnlikePhotoTap

likedPhotos.remove(photo.id)

Answer 2

You were right, in this case you need 100 bool values to do so, and I guess also need 100 img to store too.
In fact, we can do it in another way: Using List.
First, create a class to save data:

class Product {
  String img;
  bool liked;

  Post({this.img, this.liked});
}

Then, use a list to store all products:

List<Product> list = [
  Product('assets/images/demo6.png', false),
  Product('assets/images/demo7.png', false),
  Product('assets/images/demo8.png', false)
]

Finaly, show the list, I prefer using List.map:

list.map((item) => productlist(
                img: item.img,
                likebtn: IconButton(
                  onPressed: () {
                    setState(() {
                      item.liked = !item.liked;
                    });
                  },
                  icon: Icon(item.liked
                      ? Icons.thumb_up_alt_outlined
                      : Icons.thumb_up_alt_rounded),
                ),
              )
)