Radio

A radio button component for selecting a single option from a group.

When to use this

Single selection: Allow users to choose one option from multiple choices
Form inputs: Collect single-choice preferences in forms
Settings: Enable users to select one configuration option
Surveys: Gather responses with mutually exclusive options

Basic implementation


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class RadioExample extends StatefulWidget {
  const RadioExample({super.key});
 
  @override
  State<RadioExample> createState() => _RadioExampleState();
}
 
class _RadioExampleState extends State<RadioExample> {
  String? _selectedValue;
 
  @override
  Widget build(BuildContext context) {
    return RemixRadioGroup<String>(
      groupValue: _selectedValue,
      onChanged: (value) {
        setState(() {
          _selectedValue = value;
        });
      },
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        spacing: 16,
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            spacing: 8,
            mainAxisSize: MainAxisSize.min,
            children: [
              RemixRadio<String>(value: 'option1', style: style),
              const Text('Option 1'),
            ],
          ),
          Row(
            spacing: 8,
            mainAxisSize: MainAxisSize.min,
            children: [
              RemixRadio<String>(value: 'option2', style: style),
              const Text('Option 2'),
            ],
          ),
        ],
      ),
    );
  }
 
  RemixRadioStyle get style {
    return RemixRadioStyle()
        .borderRadiusAll(const Radius.circular(30))
        .size(22, 22)
        .border(
          BoxBorderMix.all(
            BorderSideMix()
                .color(Colors.blueGrey.shade100)
                .width(2.4)
                .strokeAlign(BorderSide.strokeAlignInside),
          ),
        )
        .onHovered(
          RemixRadioStyle().shadow(
            BoxShadowMix()
                .color(Colors.blueGrey.shade50.withValues(alpha: 0.7))
                .blurRadius(0)
                .spreadRadius(9),
          ),
        )
        .onPressed(
          RemixRadioStyle().border(
            BoxBorderMix.all(
              BorderSideMix()
                  .color(Colors.blueGrey.shade100)
                  .width(6)
                  .strokeAlign(BorderSide.strokeAlignInside),
            ),
          ),
        )
        .onSelected(
          RemixRadioStyle().border(
            BoxBorderMix.all(
              BorderSideMix()
                  .color(Colors.blueAccent.shade700)
                  .width(6)
                  .strokeAlign(BorderSide.strokeAlignInside),
            ),
          ),
        );
  }
}

Interactive preview

Resolving preview metadata...

Fortal styles

Remix includes Fortal-themed style helpers for this component:

Fortal variants


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class FortalRadioExample extends StatefulWidget {
  const FortalRadioExample({super.key});
 
  @override
  State<FortalRadioExample> createState() => _FortalRadioExampleState();
}
 
class _FortalRadioExampleState extends State<FortalRadioExample> {
  String? _selected;
 
  @override
  Widget build(BuildContext context) {
    return RemixRadioGroup<String>(
      groupValue: _selected,
      onChanged: (value) => setState(() => _selected = value),
      child: Column(
        children: [
          RemixRadio(value: 'soft', style: FortalRadioStyle.soft()),
          RemixRadio(value: 'solid', style: FortalRadioStyle.solid()),
        ],
      ),
    );
  }
}

See the FortalRadioStyle source code for all available options.

Constructor


// Radio Group
const RemixRadioGroup({
  Key? key,
  required T? groupValue,
  required ValueChanged<T?> onChanged,
  required Widget child,
})
 
// Radio Button
const RemixRadio({
  Key? key,
  required T value,
  bool enabled = true,
  bool toggleable = false,
  MouseCursor? mouseCursor,
  bool enableFeedback = true,
  FocusNode? focusNode,
  bool autofocus = false,
  RemixRadioStyle style = const RemixRadioStyle.create(),
  RemixRadioSpec? styleSpec,
})

Properties

Prop	Type	Required / Default Value
`style`	`RemixRadioStyle`	Optional. The style configuration for the radio button. Customize colors, borders, and state-based styling.
`styleSpec`	`RemixRadioSpec?`	Optional. A pre-resolved style spec that bypasses style resolution. Useful for performance when sharing resolved styles across multiple instances.
`key`	`Key?`	Optional. Controls how one widget replaces another widget in the tree.
`value`	`T`	Required. The value represented by this radio button.
`autofocus`	`bool`	Optional. Whether the radio button should automatically request focus when it is created.
`enabled`	`bool`	Optional. Whether this radio button is enabled.
`toggleable`	`bool`	Optional. Whether the radio button is toggleable (can be unselected).
`focusNode`	`FocusNode?`	Optional. The focus node for the radio button.
`mouseCursor`	`MouseCursor?`	Optional. The mouse cursor to use when hovering over the radio button.
`enableFeedback`	`bool`	Optional. Whether to provide feedback when the radio button is pressed.

Style Methods

Method	Description
`indicator(BoxStyler value)`	Sets indicator styling (selected fill).
`alignment(Alignment value)`	Sets container alignment.
`padding(EdgeInsetsGeometryMix value)`	Convenience for applying padding around the control.
`margin(EdgeInsetsGeometryMix value)`	Convenience for applying margin around the control.
`color(Color value)`	Sets background color on the container.
`size(double width, double height)`	Sets container size using explicit constraints.
`borderRadius(BorderRadiusGeometryMix radius)`	Sets border radius on the outer container.
`animate(AnimationConfig animation)`	Sets animation configuration.
`wrap(WidgetModifierConfig value)`	Applies widget modifiers such as clipping, opacity, or scaling.
`constraints(BoxConstraintsMix value)`	Sets size constraints on the component.
`decoration(DecorationMix value)`	Sets the container decoration.
`foregroundDecoration(DecorationMix value)`	Sets a foreground decoration painted on top of the component.
`transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)`	Applies a matrix transformation to the component.