Flutter radio buttons do not respond to clicks

Question

I have this Flutter code with two radio buttons in a FormField.

import 'package:flutter/material.dart';

enum Gender { male, female }

class RadioFormField extends FormField<String> {
  RadioFormField({
    FormFieldSetter<String>? onSaved,
    FormFieldValidator<String>? validator,
    String initialValue = '',
    AutovalidateMode autovalidateMode = AutovalidateMode.always,
  }) : super(
          onSaved: onSaved,
          validator: validator,
          initialValue: initialValue,
          autovalidateMode: autovalidateMode,
          builder: (FormFieldState<String> state) {
            String maleRadioButtonTitle = 'Male';
            String femaleRadioButtonTitle = 'Female';
            String? _genderValue = 'male';

            return Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Expanded(
                  child: RadioListTile<String>(
                    title: Text(maleRadioButtonTitle),
                    value: Gender.male.toString(),
                    groupValue: _genderValue,
                    onChanged: (String? value) {
                      state.didChange(_genderValue = 'male');
                    },
                  ),
                ),
                Expanded(
                  child: RadioListTile<String>(
                    title: Text(femaleRadioButtonTitle),
                    value: Gender.female.toString(),
                    groupValue: _genderValue,
                    onChanged: (String? value) {
                      state.didChange(_genderValue = 'female');
                    },
                  ),
                ),
              ],
            );
          },
        );
}

The problem is after they have rendered none of them respond to a selection. I can not seem to understand what is wrong. What am I missing?

Answer 1

A few things to be fixed here.

First,

state.didChange is a function that takes a single parameter value which is used to update the state of the form with the value provided.

So, call it like this,

onChanged: (String value) {
  state.didChange(value);
},

Next, you are always sending male as the groupValue with this groupValue: _genderValue. Since _genderValue is hardcoded to be male all the time.

So change it to this,

groupValue: state.value

Finally, your code will be,

class RadioFormField extends FormField<String> {
  RadioFormField({
    FormFieldSetter<String>? onSaved,
    FormFieldValidator<String>? validator,
    String initialValue = '',
    AutovalidateMode autovalidateMode = AutovalidateMode.always,
  }) : super(
      onSaved: onSaved,
      validator: validator,
      initialValue: initialValue,
      autovalidateMode: autovalidateMode,
      builder: (FormFieldState<String> state) {
        String maleRadioButtonTitle = 'Male';
        String femaleRadioButtonTitle = 'Female';

        return Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Expanded(
              child: RadioListTile<String>(
                title: Text(maleRadioButtonTitle),
                value: Gender.male.toString(),
                groupValue: state.value,
                onChanged: (String? value) {
                  state.didChange(value);
                },
              ),
            ),
            Expanded(
              child: RadioListTile<String>(
                title: Text(femaleRadioButtonTitle),
                value: Gender.female.toString(),
                groupValue: state.value,
                onChanged: (String? value) {
                  state.didChange(value);
                },
              ),
            ),
          ],
        );
      },
    );
}