Change color of button when pressed in flutter-CodePudding

I have this widget Tag which simulates an ElevatedButton. What I would like is to change the color of the button itself everytime is tapped down. I thought that setting the state in the callback "ontap" would work, but nothing happens.

I tried this, but no color changes, it stays in blue:

        return SingleChildScrollView(
      child: Wrap(
        children: <Widget>[
          for (var i = 0; i < attributesFoundDistinct.length; i  )
            FilterChipCustom(
                color: filteredByTag == true ? Colors.red : Colors.blue,
                label: attributesFoundDistinct[i],
                onSelected: (value) {
                  setState(() {
                    snapList = snapListAll;
                    _filteredDogList = snapList
                        .where((dog) => (dog[attributesFoundDistinct[i]]
                            .toLowerCase()
                            .contains(textControllerValue.toLowerCase())))
                        .toList();
                    filteredByTag = true;
                  });
                }),
        ],
      ),
    );
  }
}


class FilterChipCustom extends StatelessWidget {
  var label;
  var color;
  final ValueChanged<bool?> onSelected;

  FilterChipCustom(
      {Key? key, required this.label, this.color, required this.onSelected})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FilterChip(
      selectedColor: color,
      labelPadding: EdgeInsets.all(5.0),
      avatar: CircleAvatar(
        backgroundColor: Colors.grey.shade600,
        child: Text(label[0].toUpperCase()),
      ),
      label: Text(
        label,
        style: TextStyle(
          color: Colors.white,
        ),
      ),
      onSelected: onSelected,
      backgroundColor: Colors.blue,
      elevation: 6.0,
      shadowColor: Colors.grey[60],
      padding: EdgeInsets.all(6.0),
    );
    ;
  }
}

CodePudding user response：

The execution does not get to this line: filteredByTag = true;

This can be because:

onTap is not actually called
The lines before this one is throwing an exception

You should debug and see what exactly is happening in your onTap function. Some guesses: snapListAll could be null, or anything else to the left of a dot could be null.

CodePudding user response：

 setState(() {
                    snapList = snapListAll;
                    _filteredDogList = snapList
                        .where((dog) => (dog[attributesFoundDistinct[i]]
                            .toLowerCase()
                            .contains(textControllerValue.toLowerCase())))
                        .toList();
                    filteredByTag = true; //Here
                  });

Here filteredByTag is always true. So it will always show red color.

I think you may try this if you need to change two colors alternatively on button click.

 filteredByTag = !filteredByTag;