How to change card color upon selection of an item in Flutter?
566
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;
});
},
);
Author by
Wakashio1234
Updated on December 18, 2022Comments
-
Wakashio1234 over 1 year
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),
...
};
-
Wakashio1234 over 2 yearsIt works, but when I tap on one card, all the cards are changing color.
-
Yeasin Sheikh over 2 yearsMy apologies not being noticing it, check the update answer.
-
Wakashio1234 over 2 yearsThank you for your help. It worked wonders!