Docs
/
Headless Widgets
/
Radio Button

Radio Button

Radio buttons allow the user to select one option from a set.

It does not hold state in itself. This means the checked state needs to be handled outside of the widget. The values can be provided and updated using the checked and onChanged properties on the RadioButtonX constructor.

bool checked = false;

RadioButtonX(
  checked: checked,
  onChanged: (v) => setState(() => checked = v),
),

It makes use of the active variant, that can be used alongside other variants, such as hover, press and disable, to provide the best effect to the end-user.

RadioButtonX(
  mix: Mix(
    (hover | active)( // if hovering and active
      borderColor($primary), // the color of the border is [$primary]
    )
  ),
  ...,
),

Indicator

You can provide a custom indicator to the radio button using the indicator property:

RadioButtonX(
  indicator: RadioButtonIndicator(Mix(
    (active)( // if active
      bgColor(Colors.amber), // use the color amber
    ),
  )),
),

A child can also be provided to RadioButtonIndicator.

RadioButtonIndicator can be extended in order to create custom effects, like:

class _MyRadioButtonIndicator extends RadioButtonIndicator {

  _MyRadioButtonIndicator() : super(Mix.constant);

  Widget build(BuildContext context, bool checked) {
    if (checked) { // Return a custom widget to be shown as the indicator
      return ...;
    }
    return const SizedBox.shrink();
  }

}