A radio button component for selecting a single option from a group.
Interactive preview
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: .center,
spacing: 16,
mainAxisSize: .min,
children: [
Row(
spacing: 8,
mainAxisSize: .min,
children: [
RemixRadio<String>(value: 'option1', style: style),
const Text('Option 1'),
],
),
Row(
spacing: 8,
mainAxisSize: .min,
children: [
RemixRadio<String>(value: 'option2', style: style),
const Text('Option 2'),
],
),
],
),
);
}
RemixRadioStyler get style {
return RemixRadioStyler()
.borderRadius(.circular(30))
.size(22, 22)
.border(
.color(Colors.blueGrey.shade100)
.width(2.4)
.strokeAlign(BorderSide.strokeAlignInside),
)
.onHovered(
.shadow(
.color(Colors.blueGrey.shade50.withValues(alpha: 0.7))
.blurRadius(0)
.spreadRadius(9),
),
)
.onPressed(
.border(
.color(Colors.blueGrey.shade100)
.width(6)
.strokeAlign(BorderSide.strokeAlignInside),
),
)
.onSelected(
.border(
.color(Colors.blueAccent.shade700)
.width(6)
.strokeAlign(BorderSide.strokeAlignInside),
),
);
}
}Fortal widgets
Remix includes a generated Fortal-themed widget for this component:
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: [
Row(
children: [
FortalRadio.surface(
value: 'surface',
),
const SizedBox(width: 8),
const Text('Surface'),
],
),
Row(
children: [
FortalRadio.soft(
value: 'soft',
),
const SizedBox(width: 8),
const Text('Soft'),
],
),
],
),
);
}
}See the fortalRadioStyler source code for all available options.
Constructor
// Radio Group
const RemixRadioGroup({
Key? key,
required T? groupValue,
ValueChanged<T?>? onChanged,
required Widget child,
})
// Radio Button
const RemixRadio({
Key? key,
required T value,
bool enabled = true,
bool toggleable = false,
MouseCursor? mouseCursor,
FocusNode? focusNode,
bool autofocus = false,
RemixRadioStyler style = const RemixRadioStyler.create(),
RemixRadioSpec? styleSpec,
})Properties
Widget Properties
groupValue → T?
Required. The currently selected value for the radio group.
onChanged → ValueChanged<T?>?
Optional. Called when a radio button in the group is selected. When omitted, the radio group is disabled.
child → Widget
Required. The child widget that contains the radio buttons.
style → RemixRadioStyler
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.
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.
size(double width, double height)
Sets container size using explicit constraints.
borderRadius(BorderRadiusGeometryMix radius)
Sets border radius on the outer container.
animate(AnimationConfig value)
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, {Alignment alignment = .center})
Applies a matrix transformation to the component.
call<T>({required T value, bool enabled = true, bool autofocus = false, bool toggleable = false, FocusNode? focusNode, MouseCursor? mouseCursor})
Creates a RemixRadio<T> widget with this style applied.