components/forms/flutstrap_radio library Components Forms

Flutstrap Radio

A high-performance, accessible radio button component with comprehensive theming, smooth animations, and Bootstrap-inspired variants.

{@tool snippet}

Basic Usage

// Basic radio group
Column(
  children: [
    FlutstrapRadio<String>(
      value: 'option1',
      groupValue: _selectedOption,
      onChanged: (value) => setState(() => _selectedOption = value),
      label: 'Option 1',
    ),
    FlutstrapRadio<String>(
      value: 'option2',
      groupValue: _selectedOption,
      onChanged: (value) => setState(() => _selectedOption = value),
      label: 'Option 2',
    ),
  ],
)

// Radio with variant
FlutstrapRadio<String>(
  value: 'success',
  groupValue: _status,
  onChanged: (value) => setState(() => _status = value),
  variant: FSRadioVariant.success,
  label: 'Success Status',
)

// Using convenience methods
FlutstrapRadio<String>(
  value: 'custom',
  groupValue: _selected,
  onChanged: (value) => setState(() => _selected = value),
).success().withLabel('Custom styled')

{@end-tool}

Performance Features

  • Style Caching: Radio styles cached by variant, size, and theme
  • Efficient Rendering: Minimal rebuilds with optimized state management
  • Smooth Animations: Hardware-accelerated transitions for selection states
  • Memory Management: Proper resource disposal and cache management

Accessibility

  • Full screen reader support with semantic labels
  • Keyboard navigation with focus indicators
  • Proper ARIA attributes for radio groups
  • High contrast support for visually impaired users

Radio Group Best Practices

  • Always provide meaningful labels for each radio option
  • Use semanticLabel for complex custom labels
  • Group related radios together semantically
  • Provide validation feedback for required fields

Classes

FlutstrapRadio<T>

Enums

FSRadioSize
Flutstrap Radio Size
FSRadioVariant
Flutstrap Radio Variants