Make a list tile button turn grey when clicked - flutter

Question

How can I make individual buttons turn grey when I click on approve?
The screenshot is below
Below is the List Tile widget code
Widget pendingList({
required String title,
required String subtitle,
required String leading,
onTap,
}) {
return Row(
children: [
Expanded(
flex: 6,
child: Card(
child: ListTile(
leading: Container(
padding: const EdgeInsets.only(left: 15.0),
alignment: Alignment.center,
height: 50,
width: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: NetworkImage(
'therul'),
fit: BoxFit.cover,
),
),
),
title: Text(
title,
style: TextStyle(
fontSize: BtnFnt2,
fontWeight: FontWeight.w600,
),
),
subtitle: Text(
subtitle,
style: TextStyle(
fontSize: littleTexts,
),
),
),
),
),
Expanded(
flex: 2,
child: Bounce(
duration: const Duration(milliseconds: 100),
onPressed: onTap,
child: Container(
padding: const EdgeInsets.all(15.0),
color: appOrange,
child: Text(
'Approve',
style: TextStyle(
color: white,
fontWeight: FontWeight.w500,
),
),
),
),
),
],
);
}
How can I make individual buttons turn grey when I click on approve?
Any idea will be appreciated. Kindly refer to the screenshot and assist if you can.

Answer 1

One way, is to make the card into a stateful widget, like (simplified)
class ColorCard extends StatefulWidget {
const ColorCard({
Key? key,
}) : super(key: key);
#override
State<ColorCard> createState() => _ColorCardState();
}
class _ColorCardState extends State<ColorCard> {
Color col = Colors.white;
#override
Widget build(BuildContext context) {
return Card(
color: col,
child: ListTile(
title: const Text('title'),
subtitle: const Text('subtitle'),
trailing: ElevatedButton(
onPressed: () {
setState(() => col = Colors.grey);
},
child: const Text('click'),
),
),
);
}
}
Alternatively the color could be based on a value stored in an object that extends or 'mixin'-s ChangeNotifier if you want more comprehensive integration.