Radio

Starting Flutter example…

Live Flutter from this checkout’s component catalog. Examples include Fortal styling; the source tab shows the catalog code, not a standalone application.

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', semanticLabel: 'Option 1', style: style),
              const Text('Option 1'),
            ],
          ),
          Row(
            spacing: 8,
            mainAxisSize: MainAxisSize.min,
            children: [
              RemixRadio<String>(value: 'option2', semanticLabel: 'Option 2', style: style),
              const Text('Option 2'),
            ],
          ),
        ],
      ),
    );
  }

  RadioStyler get style {
    return RadioStyler()
        .borderRadius(.all(const Radius.circular(30)))
        .size(22, 22)
        .border(
          BoxBorderMix.all(
            BorderSideMix()
                .color(Colors.blueGrey.shade100)
                .width(2.4)
                .strokeAlign(BorderSide.strokeAlignInside),
          ),
        )
        .onHovered(
          RadioStyler().shadow(
            BoxShadowMix()
                .color(Colors.blueGrey.shade50.withValues(alpha: 0.7))
                .blurRadius(0)
                .spreadRadius(9),
          ),
        )
        .onPressed(
          RadioStyler().border(
            BoxBorderMix.all(
              BorderSideMix()
                  .color(Colors.blueGrey.shade100)
                  .width(6)
                  .strokeAlign(BorderSide.strokeAlignInside),
            ),
          ),
        )
        .onSelected(
          RadioStyler().border(
            BoxBorderMix.all(
              BorderSideMix()
                  .color(Colors.blueAccent.shade700)
                  .width(6)
                  .strokeAlign(BorderSide.strokeAlignInside),
            ),
          ),
        );
  }
}

Fortal widgets

The application-owned Fortal preset provides a themed widget for this component:

Fortal variants

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
import 'ui/ui.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',
                semanticLabel: 'Surface',
              ),
              const SizedBox(width: 8),
              const Text('Surface'),
            ],
          ),
          Row(
            children: [
              FortalRadio.soft(
                value: 'soft',
                semanticLabel: 'Soft',
              ),
              const SizedBox(width: 8),
              const Text('Soft'),
            ],
          ),
        ],
      ),
    );
  }
}

See the fortalRadioStyle source code for all available options.

Constructor

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

// Radio Group
RemixRadioGroup<T> remixRadioGroupConstructor<T>({
  Key? key,
  required T? groupValue,
  ValueChanged<T?>? onChanged,
  required Widget child,
}) => throw UnimplementedError();

// Radio Button
RemixRadio<T> remixRadioConstructor<T>({
  Key? key,
  required T value,
  required String semanticLabel,
  bool enabled = true,
  bool toggleable = false,
  MouseCursor? mouseCursor,
  FocusNode? focusNode,
  bool autofocus = false,
  bool excludeSemantics = false,
  RadioStyler style = const RadioStyler.create(),
  RadioSpec? styleSpec,
}) => throw UnimplementedError();