How to select radio button when tapped on the container? - flutter

Question

Basically, there is a row with two containers with the child as radio buttons. The containers change colour according to the selected radio button but I want the containers to change colours by tapping on them and not exactly by tapping the radio button.
Code:
Container(
height: 60,
width: 130,
decoration: BoxDecoration(
color: _radioBtnVal == 'manual' ? AMBER : WHITE,
borderRadius: BorderRadius.circular(15)),
child: Row(
children: [
Radio<String>(
//activeColor: WHITE,
activeColor: Colors.red,
value: "manual",
groupValue: _radioBtnVal,
onChanged: _handleChange),
Text(
"Manual",
style: TextStyle(
color: _radioBtnVal == 'manual' ? WHITE : BLACK,
fontWeight: FontWeight.bold),
),
],
),
),
SizedBox(width: 80),
Container(
height: 60,
width: 130,
decoration: BoxDecoration(
color: _radioBtnVal == 'video' ? AMBER : WHITE,
borderRadius: BorderRadius.circular(15)),
child: Row(
children: [
Radio<String>(
//activeColor: WHITE,
activeColor: Colors.red,
value: "video",
groupValue: _radioBtnVal,
onChanged: _handleChange),
Text(
"Video Call",
style: TextStyle(
color: _radioBtnVal == 'video' ? WHITE : BLACK,
fontWeight: FontWeight.bold),
),
],
),
),
Here is an image of what the output looks like.
Output:

Answer 1

You have to wrap the containers with gesture detectors and every time the container is tapped you have to pass a value to the function that handles the radio buttons and setstate. I have updated your code to get the desired output.
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(debugShowCheckedModeBanner: false, home: RadioTest()));
}
class RadioTest extends StatefulWidget {
const RadioTest({
Key? key,
}) : super(key: key);
#override
State<RadioTest> createState() => _RadioTestState();
}
class _RadioTestState extends State<RadioTest> {
String _radioBtnVal = "";
_handleChange(String? value) {
setState(() {
_radioBtnVal = value.toString();
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
GestureDetector(
onTap: () {
_handleChange('manual');
},
child: Container(
height: 60,
width: 130,
decoration: BoxDecoration(
color: _radioBtnVal == 'manual' ? Colors.amber : Colors.white,
borderRadius: BorderRadius.circular(15)),
child: Row(
children: [
Radio<String>(
//activeColor: WHITE,
activeColor: Colors.red,
value: "manual",
groupValue: _radioBtnVal,
onChanged: _handleChange),
Text(
"Manual",
style: TextStyle(
color: _radioBtnVal == 'manual'
? Colors.white
: Colors.black,
fontWeight: FontWeight.bold),
),
],
),
),
),
const SizedBox(width: 80),
GestureDetector(
onTap: () {
_handleChange('video');
},
child: Container(
height: 60,
width: 130,
decoration: BoxDecoration(
color: _radioBtnVal == 'video' ? Colors.amber : Colors.white,
borderRadius: BorderRadius.circular(15)),
child: Row(
children: [
Radio<String>(
//activeColor: WHITE,
activeColor: Colors.red,
value: "video",
groupValue: _radioBtnVal,
onChanged: _handleChange),
Text(
"Video Call",
style: TextStyle(
color: _radioBtnVal == 'video'
? Colors.white
: Colors.black,
fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
);
}
}