I want to change the color of like button when I click on the like button In the list of containers

Viewed 52

I have a list of containers having like button each. I want to change the color of like button when it clicked. But instead of changing the color of 1 like button when I clicked on like button it is changing the color of all like buttons in all containers. .

Here is my code.

var tap = false;

body: ListView.builder(
          itemCount: Get.find<UserController>().jobsList.length,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.fromLTRB(15, 15, 15, 5),
              child: Container(
                padding: EdgeInsets.all(15),
                decoration: BoxDecoration(
                    color: Colors.blueGrey,
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(
                      width: 2,
                      color: Colors.black,
                    )),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('Hello World'),
                    SizedBox(
                      height: 20,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        InkWell(
                          onTap: () {
                            setState(() {
                              tap = !tap;
                            });
                          },
                          child: tap
                              ? Text(
                                  'Like',
                                  style: TextStyle(
                                      fontSize: 16, color: colorGreen),
                                )
                              : Text(
                                  'Like',
                                  style: TextStyle(
                                      fontSize: 16, color: Colors.white),
                                ),
                        ),
                        Text(
                          'Comment',
                          style: TextStyle(fontSize: 16, color: Colors.white),
                        ),
                        Text(
                          'Share',
                          style: TextStyle(fontSize: 16, color: Colors.white),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            );
          }),
2 Answers

The issue is here you are using single bool to control all index. Use a model class with isSelected bool or a list to hold the tap event.

I am holding the tapIndex on state class.

  List<int> tapItemIndex = [];

And changes on tap

InkWell(
  onTap: () {
    if (tapItemIndex.contains(index)) {
      tapItemIndex.remove(index);
    }else{
      tapItemIndex.add(index);
    }
    setState(() {});
  },
  child: tapItemIndex.contains(index)
      ? Text(
          'Like',

Make the ListView.builder build a new widget for every item, this ensures that the onTap will be applied for only one list item.

ListView.builder(
    itemCount: Get.find<UserController>().jobsList.length,
    itemBuilder: (context, index) {
        return ListItem(tap: tap,);
}),

The new widget which builds for every index,

class ListItem extends StatefulWidget {
   ListItem({
    Key? key,
    required this.tap,
  }) : super(key: key);

   bool tap;

  @override
  State<ListItem> createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(15, 15, 15, 5),
      child: Container(
        padding: EdgeInsets.all(15),
        decoration: BoxDecoration(
            color: Colors.blueGrey,
            borderRadius: BorderRadius.circular(10),
            border: Border.all(
              width: 2,
              color: Colors.black,
            )),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Hello World'),
            SizedBox(
              height: 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                InkWell(
                  onTap: () {
                    setState(() {
                      widget.tap = !widget.tap;
                    });
                  },
                  child: widget.tap
                      ? Text(
                          'Like',
                          style: TextStyle(
                              fontSize: 16, color: Colors.green),
                        )
                      : Text(
                          'Like',
                          style: TextStyle(
                              fontSize: 16, color: Colors.white),
                        ),
                ),
                Text(
                  'Comment',
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
                Text(
                  'Share',
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}
Related