I am using flutter I want to change the color of a particular card when I tap on it, not all the cards at the same time. The code is attached below. I am glad if someone helps. ...

Widget options(context,String title,String subtitle,String price,

  String info, String plan) {
return GestureDetector(
  child: Container(
    height: 166,
    width: 119,
    child: Card(
      color: Colors.white,
      elevation: 3,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        children: [
          Container(
            width: 120,
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.only(
                topLeft: const Radius.circular(7),
                topRight: const Radius.circular(7),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.only(bottom: 8, top: 8),
              child: Text(
                title,
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Color.fromRGBO(255, 255, 255, 1),
                    fontSize: 15,
                    fontFamily: 'CeroPro',
                    fontWeight: FontWeight.bold),
              ),
            ),         
            ),             
          )
        ],
      ),
    ),
  ),
);

} } ...

CodePudding user response：

You could use a stateful widget.

So it would look something like this

class MyCard extends StatefulWidget {
  MyCard(this.title, this.subtitle, this.price, this.info, this.plan);
  String title;
  String subtitle;
  String price;

  String info;
  String plan;
  @override
  _MyCardState createState() => _MyCardState();
}

class _MyCardState extends State<MyCard> {
  // initial color 
  Color color = Colors.white;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          //where newColor is the color it turns to
          color = newColor;
        });
      },
      child: Container(
        height: 166,
        width: 119,
        child: Card(
          // color is now a variable
          color: color,
          elevation: 3,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
          child: Column(
            children: [
              Container(
                width: 120,
                decoration: BoxDecoration(
                  color: Colors.black,
                  borderRadius: BorderRadius.only(
                    topLeft: const Radius.circular(7),
                    topRight: const Radius.circular(7),
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(bottom: 8, top: 8),
                  child: Text(
                    // to access the stateful widget's parameters, use widget.<parameter>
                    widget.title,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: Color.fromRGBO(255, 255, 255, 1),
                        fontSize: 15,
                        fontFamily: 'CeroPro',
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}