Im trying to have groups of radio buttons so I can select one at a time from that group.
The list of radio buttons which I group to a ListView
ListView.builder(
shrinkWrap: true,
controller: _controller,
itemCount: _rampValues.length,
itemBuilder: (context, int index) {
var tt = _rampValues[index];
return ListTile(
title: Text(tt.name!, style: tBody5),
leading: Radio(
value: tt.selected!,
groupValue: _rampResult,
onChanged: (value) {
setState(() {
_rampResult = value.toString();
});
}),
);
})
The model is like
List<ValueModel> _rampValues = [];
var _rampResult;
...
class ValueModel {
final int? id;
final int? subId;
final String? name;
final String? subName;
bool? selected;
bool? subSelected;
ValueModel(
{this.id,
this.subId,
this.name,
this.subName,
this.selected,
this.subSelected});
}
but when I load the UI to view its not selecting nor responding
how can I fix this ?
CodePudding user response:
Your Radio
widget should be of type ValueModel
along with Radio value
property, like this:
ListView.builder(
shrinkWrap: true,
controller: _controller,
itemCount: _rampValues.length,
itemBuilder: (context, int index) {
var tt = _rampValues[index];
return ListTile(
title: Text(tt.name!),
leading: Radio<ValueModel>(
value: tt,
groupValue: _rampResult,
onChanged: (ValueModel? value) {
setState(() {
_rampResult = value;
});
}),
);
}),
CodePudding user response:
When you call setState
setState(() {
_rampResult = value.toString();
});
you change the state and build
gets triggered again, but your radio buttons are still set to only check the selected
field:
value: tt.selected!,
But that field did not change. So your radio buttons do not change. Either you need a logic to change your selected
fields inside your setState
or maybe your initial value should be something that is compared to _rampResult
to find out if it's selected, instead of using a field.