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

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),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            );
          }),

CodePudding user response：

Inside JobList you have to initialize one bool type variable isFavorite. And when you tap on like button only change that button value. Here is the 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(() {
                        jobsList[index].isFavorite = !jobsList[index].isFavorite;
                      });
                    },
                    child: jobsList[index]
                        ? 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),
                  ),
                ],
              )
            ],
          ),
        ),
      );
    }
  ),

CodePudding user response：

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',