I have multiple cards listed in a gridView which is fetched from the model. I want to change the background color of a particular card upon selection of the card. That is, when I touch the card, I want the color of that one card to change, and if I select another card, I want the first card color to go back to its original one and want the second card's color to change. I have tried various methods but cannot do it.
Grid view:
Widget build(BuildContext context) {
final petTypes = widget.pet.types();
var petKeys = petTypes.keys.toList();
return Scaffold(
appBar: AppBar(
title: Text('Add pets - Type'),
backgroundColor: Color.fromRGBO(101, 69, 112, 1.0),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: GridView.count(
crossAxisCount: 2,
scrollDirection: Axis.vertical,
primary: false,
children: List.generate(petTypes.length, (index) {
return GestureDetector(
child: Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
petTypes[petKeys[index]],
Text(petKeys[index]),
],
),
// onPressed: () async {
// widget.pet.type = petKeys[index];
// },
),
onTap: (){
setState(() {
widget.pet.type = petKeys[index];
});
}
);
}),
),
),
The model:
Map<String, Image> types() => {
"Dog":
Image(image: AssetImage('Assets/images/dog-type.png'), width: 70),
"Cat":
Image(image:AssetImage('Assets/images/cat-type.png'), width: 70),
"Bird":
Image(image:AssetImage('Assets/images/bird-type.png'), width: 70),
"Rabbit":
Image(image:AssetImage('Assets/images/rabbit-type.png'), width: 70),
"Hamster":
Image(image:AssetImage('Assets/images/hamster-type.png'), width: 70),
"Fish":
Image(image:AssetImage('Assets/images/fish-tank.png'), width: 70),
...
};
CodePudding user response:
Create a nullable int on state class and pass color based on it, and change index on onTap:
like
int? selectedIndex;
@override
Widget build(BuildContext context) {
//...
GestureDetector(
child: Card(
color: selectedIndex == index? Colors.green : null,
),
onTap: () {
setState(() {
selectedIndex = index;
});
},
);