I am new to flutter and dart. I have tried to insert few radio buttons and a raised button within a ModalBottomSheet. The expected output is that, the button should be disabled until any option is selected from the radio buttons, and once any option is selected the button should be enabled. In the code I have tried, there is an issue that the radio buttons are not getting selected as soon I click on them, instead they get selected once I close and reopen the bottom popup screen. Also, I'm unable to write code for disabling and enabling the button as I am unaware of it. Any suggestions would be very much helpful, thanks in advance!
class ReturnReason extends StatefulWidget {
@override
_ReturnReasonState createState() => _ReturnReasonState();
}
class _ReturnReasonState extends State<ReturnReason> {
int selectedRadio;
@override
void initSate() {
super.initState();
selectedRadio = 0;
}
setSelectedRadio(int val) {
setState(() {
selectedRadio = val;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Flutter Project',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.bold,
),
),
backgroundColor: Colors.black12,
iconTheme: IconThemeData(color: Colors.black),
),
body: Center(
child: RaisedButton(
onPressed: () {
_bottomSheet(context);
},
color: Colors.deepPurple,
padding: EdgeInsets.all(10.0),
child: Text(
'Click me',
style: TextStyle(color: Colors.white, fontSize: 18.0),
),
),
),
);
}
_bottomSheet(context) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height * .80,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Container(
width: 0.8 * MediaQuery.of(context).size.height,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Select Return Reason'),
],
),
),
Container(
width: 0.8 * MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Improper description'),
Radio(
value: 1,
groupValue: selectedRadio,
onChanged: (val) {
setSelectedRadio(val);
},
),
],
),
),
Divider(),
Container(
width: 0.8 * MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Size issue'),
Radio(
value: 2,
groupValue: selectedRadio,
onChanged: (val) {
setSelectedRadio(val);
},
),
],
),
),
Divider(),
Container(
width: 0.8 * MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Other'),
Radio(
value: 3,
groupValue: selectedRadio,
onChanged: (val) {
setSelectedRadio(val);
},
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 0.9 * MediaQuery.of(context).size.width,
height: 0.075 * MediaQuery.of(context).size.height,
child: RaisedButton(
onPressed: () => {
_bottomSheet2(context)
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
borderRadius: BorderRadius.circular(10.0)),
child: GestureDetector(
onTap: () {
_bottomSheet2(context);
},
child: Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width,
minHeight: 0.075 *
MediaQuery.of(context).size.height),
alignment: Alignment.center,
child: Text('Continue'),
),
),
),
),
],
),
],
),
),
));
});
}
