Change the color of particular card on taping it in flutter?

Question

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

} } ...

Answer 1

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

Answer 2

You can try this also:

import 'package:flutter/material.dart';

class Testing extends StatefulWidget {
    const Testing({Key? key}) : super(key: key);



 @override
  State<Testing> createState() => _TestingState();
}

class _TestingState extends State<Testing> {
  bool isColor1Changed = false;
  bool isColor2Changed = false;
  bool isColor3Changed = false;
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Row(
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                isColor1Changed = !isColor1Changed;
              });
            },
            child: options(context, "POPULAR", "Monthly", "\$4.99",
                "3 Days Free Trail", "plan", isColor1Changed),
          ),
          const SizedBox(width: 6),
          GestureDetector(
            onTap: () {
              setState(() {
                isColor2Changed = !isColor2Changed;
              });
            },
            child: options(context, "83% OFF", "YEARLY", "\$9.99",
                "\$0.83 / MONTH", "plan", isColor2Changed),
          ),
          const SizedBox(width: 6),
          GestureDetector(
            onTap: () {
              setState(() {
                isColor3Changed = !isColor3Changed;
              });
            },
            child: options(context, "50% OFF", "LIFE TIME", "\$19.99",
                "\$39.98", "plan", isColor3Changed),
          ),
        ],
      ),
    );
  }

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