Flutter onTap for inkwell - flutter

Question

I am currently working on a page where I have bunch of containers in the page and they should be able change colors from 'bluegrey' to 'grey' when tapped.
The output that I have right now is :
The output that I want is :
My code for this is:`
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Hexcolor('#e9f1fe'),
body: Column(
children: [
Padding(
padding: EdgeInsets.only(top: 40.0, right: 16.0, left: 16.0),
child: Container(
height: 60,
color: Colors.blueGrey,
child: Center(
child: Text(
'Random Text 1',
style: TextStyle(
fontSize: 26.0,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 40.0, right: 16.0, left: 16.0),
child: Container(
height: 60,
color: Colors.blueGrey,
child: Center(
child: Text(
'Random Text 2',
style: TextStyle(
fontSize: 26.0,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 40.0, right: 16.0, left: 16.0),
child: Container(
height: 60,
color: Colors.blueGrey,
child: Center(
child: Text(
'Random Text 3',
style: TextStyle(
fontSize: 26.0,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
),
],
),
));
}
}
`
Can I get some help with this? A code snippet would be very helpful. Thanks!

Answer 1

As far as I understand your question, I would like to answer.
You can do something like.
Map<String, Color> buttonColors = { };
Make an InkWell widget like this,
InkWell(
onTap: () => {
setState(() {
buttonColors ['button1'] = Colors.blueGrey;
})
},
child: Padding(
padding: EdgeInsets.only(top: 40.0, right: 16.0, left: 16.0),
child: Container(
height: 60,
color: buttonColors ['button1'] ?? Colors.grey,
child: Center(
child: Text(
'Random Text 1',
style: TextStyle(
fontSize: 26.0,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
),
)
If they click on your button, set the state for 'button1' in the buttonColors map.
When it is rendering your button, it will check whether the value is null for button1, if it is so, it will apply Colors.grey, else if you have clicked and set the state, then it has some color value and it displays that color. Here Colors.blueGrey.