'Change the color of particular card on taping it in flutter?
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),
),
),
),
)
],
),
),
),
);
} } ...
Solution 1:[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),
),
),
),
],
),
),
),
);
}
}
Solution 2:[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),
),
),
),
],
),
),
),
);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | rapaterno |
Solution 2 | smita |