radio button selection is not coming on run time in flutter - flutter

Question

I am iterating over the map and creating a radio button inside the bottom sheet, in my dashboard I have "..." button once clicked it opens the bottom sheet.(inside my dashboard I am calling the DashboardFilter class present in filter.dart file that brings the bottomsheet,
below is the filter.dart file
class DashboardFilter extends StatefulWidget {
#override
_DashboardFilterState createState() => _DashboardFilterState();
final ValueChanged<Map<String, bool>> parentAction;
final ValueChanged<Map<String, bool>> childAction;
int radioValue1 = -1;
DashboardFilter(
{Key key,
this.parentAction,
this.childAction,
})
: super(key: key);
}
class _DashboardFilterState extends State<DashboardFilter> {
void showModalSheet() {
List<Map<String, Object>> timeData;
timeData = [
{"id": 1, "displayId": "Daily"},
{"id": 2, "displayId": "Weekly"},
{"id": 3, "displayId": "Monthly"}
];
showModalBottomSheet<void>(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter state) {
return createBox(context, timeData, state);
});
});
}
createBox(BuildContext context,
List<Map<String, Object>> tickbox, StateSetter state) {
DateTime toDate;
DateTime fromDate;
var tickboxdata = tickbox.map<Widget>((data) {
int id = data["id"];
var dispId = data["displayId"];
return radiogen(context, id, dispId);
}).toList();
return SingleChildScrollView(
child: LimitedBox(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Column(
children: tickboxdata,
),),], ), ), );
}
void _handleRadioValueChange1(int value) {
setState(() {
widget.radioValue1 = value;
switch (widget.radioValue1) {
case 1:
print("1 selected");
break;
case 2:
break;
case 3:
break;
}
});
}
Widget radiogen(BuildContext context, int id, var disp) {
return Container(
padding: EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: id,
groupValue: widget.radioValue1,
onChanged: _handleRadioValueChange1,
),
new Text(
disp,
style: new TextStyle(fontSize: 16.0),
), ], ), ], ), );
}
#override
Widget build(BuildContext context) {
return Container(
child: IconButton(
icon: new Icon(Icons.more_horiz), onPressed: showModalSheet),
);
}
}
The issue what I am facing is once I select the radio button, its not showing which Item is selected on that time ,I again need to go to back and press again (...) button then it shows that option is selected.
can anyone help me to solve this,
Ithink problem is with the setState, let me know if there any changes to do?

Answer 1

after sometime studying your code here is my solution
you need put a Statesetter on radiogen widget
Widget radiogen(BuildContext context, int id, var disp, StateSetter
stateSetter) {
return Container(
padding: EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: id,
groupValue: widget.radioValue1,
onChanged: (value) {
stateSetter(() {
_handleRadioValueChange1(value);
});
}),
new Text(
disp,
style: new TextStyle(fontSize: 16.0),
),
],
),
],
),
);
}
then pass the state when you call the widget
createBox(BuildContext context, List<Map<String, Object>> tickbox,
StateSetter state) {
DateTime toDate;
DateTime fromDate;
var tickboxdata = tickbox.map<Widget>((data) {
int id = data["id"];
var dispId = data["displayId"];
return radiogen(context, id, dispId, state);
}).toList();
return SingleChildScrollView(
child: LimitedBox(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Column(
children: tickboxdata,
),
),
],
),
),
);
}
this way you can change the state on the radio
Radio(
value: id,
groupValue: widget.radioValue1,
onChanged: (value) {
stateSetter(() {
_handleRadioValueChange1(value);
});
}),