How to change a SVG picture's color when button is clicked in flutter?

Question

I am currently working on making the school curriculum app that shows some courses that students must learn.

Here is a brief code that I am working on right now.

class courseBoxes extends StatefulWidget {
  String labelText;
  bool selected;
  double xSize;

  courseBoxes({Key key, @required this.labelText, this.xSize,this.selected})
      : super(key: key);

  @override
  courseBoxState createState() => courseBoxState();
}

class courseBoxState extends State<courseBoxes> {

  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: ChoiceChip(
          padding: EdgeInsets.only(bottom: 8),

          label: Container(
            child: Text(
              widget.labelText,
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.w400,
                fontSize: 14,
              ),
            ),
          ),
          visualDensity: VisualDensity.standard,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(4.0),
            ),
            side: BorderSide(
              color: widget.selected == true ? Color(0xff6d69fb) : Color(0xfff3f2ff)
            )
          ),
          selected: widget.selected,
          labelStyle: TextStyle(color: Colors.white),
          backgroundColor: Color(0xfff3f2ff),
          selectedColor: Color(0xffbeb9ff),
          onSelected: (selected) {
            setState(
              () {
                widget.selected = !widget.selected;
              },
            );
          },
        ),
      ),
      height: 26,
      width: widget.xSize,
    );
  }
}

This code is nothing but making a course box that changes color when it is clicked by checking bool selected value just like this gif below.

The problem is this. When I pass a bool variable to this class courseBoxes, it seems like the bool variable that I pass is not updated at all. For example,

class certificateguidelineState extends State<certificateguideline> {
  bool _arrowSelect3=true;
  ...
      Container(
          padding: EdgeInsets.fromLTRB(136, 144, 0, 0),
          child: courseBoxes(labelText: "????",xSize: 103,selected: this._arrowSelect3,),
      ),

This works fine but, this one is not working.

....
Container(
            padding: EdgeInsets.fromLTRB(270, 92, 0, 0),
            child: SvgPicture.asset(
            'asset/arrowSVG/arrow2.svg',color: _arrowSelect3 == true ? Colors.black : Colors.blue
           ),
),

I thought passing bool _arrowSelect3 would also affect this container because class courseBoxes change _arrowSelect3's value by pressing its button.. but I found out I got totally wrong way... Is there any solution for this?

Answer 1

等待大神答复