FlutterGallery

Radio

Radio Widget is useful when users have multiple or one of several options to choose from.
Here we explain how to use the Radio Widget provided by Flutter and examples of its applications.

Basic Usage

  • Radio

Radio is a great way to create simple Radio buttons in Flutter.
With onChanged, you can get whether the value set in the Radio Widget has been selected by the user.

enum RadioValue { apple, grape, lemon }
RadioValue? selectedValue = RadioValue.apple;


return Radio(
  value: RadioValue.apple,
  groupValue: selectedValue,
  onChanged: (val) {
    setState(() {
      selectedValue = val;
    });
  }
),

Label

  • RadioListTile

RadioListTile is useful if you want to create radio buttons with labels.
You can change the field to disabled by setting the value of onChanged to null.

RadioListTile(
  title: const Text("Label"),
  value: RadioValue.apple,
  groupValue: selectedValue,
  onChanged: (val) {
    setState(() {
      selectedValue = val;
    });
  }
),

Colors

By changing the values of activeColor, hoverColor, etc., you can change the color when active or hovering.
If you want to change the color more freely, you can use MaterialStateProperty.

Radio(
  activeColor: Colors.red,
  hoverColor: Colors.red[50],
  value: RadioValue.apple,
  groupValue: selectedValue,
  onChanged: (val) {
    setState(() {
      selectedValue = val;
    });
  }),

Validation

  • FormField

To validate input values in the Radio Widget, you can use a FormField.
Note that it must be enclosed in a Form() and the formKey must be set.

FormField(
  autovalidateMode: AutovalidateMode.always,
  initialValue: RadioValue.apple,
  validator: (value) {
    if (value == RadioValue.apple) {
      return "Apple is Error!";
    }
    return null;
  },
  builder: (FormFieldState<RadioValue> state) {
    return  RadioListTile(
      ...
    )
  }
)

API

For further information, please refer to the official documentation below.

Previous
Next