Home > Back-end >  Radio button is not selected inside ListView.builder in flutter
Radio button is not selected inside ListView.builder in flutter

Time:03-04

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.

  • Related