RadioButtonAppi

A customizable radio button widget with enhanced styling and group management for Flutter applications.

Features

• Group Selection: Mutually exclusive selection within a group
• Custom Styling: Configurable colors, sizes, and visual properties
• Interactive States: Hover and focus effects
• Flexible Layout: Optional label text with customizable positioning
• Accessibility: Built-in accessibility support
• Type Safety: Generic type support for values

Usage

enum PaymentMethod { card, cash, digital }
PaymentMethod selectedMethod = PaymentMethod.card;

RadioButtonAppi<PaymentMethod>(
  value: PaymentMethod.card,
  groupValue: selectedMethod,
  onChanged: (PaymentMethod? value) {
    setState(() {
      selectedMethod = value!;
    });
  },
  label: 'Credit Card',
)

Parameters

Parameter	Type	Description
value	T	Required. The value this radio button represents
groupValue	T?	Required. The currently selected value in the group
onChanged	ValueChanged<T?>?	Required. Callback when radio button is selected
label	String?	Optional text label displayed next to radio button
activeColor	Color?	Color when radio button is selected (default: primary color)
focusColor	Color?	Color when radio button is focused
hoverColor	Color?	Color when radio button is hovered
overlayColor	MaterialStateProperty<Color?>?	Color for different interaction states
splashRadius	double?	Radius of the splash effect
materialTapTargetSize	MaterialTapTargetSize?	Size of the tap target
visualDensity	VisualDensity?	Visual density for spacing
focusNode	FocusNode?	Focus node for keyboard navigation
autofocus	bool	Whether to autofocus (default: false)
toggleable	bool	Whether the radio can be deselected (default: false)

Examples

Basic Radio Button Group

enum Gender { male, female, other }
Gender? selectedGender;

Column(
  children: [
    RadioButtonAppi<Gender>(
      value: Gender.male,
      groupValue: selectedGender,
      onChanged: (Gender? value) {
        setState(() {
          selectedGender = value;
        });
      },
      label: 'Male',
    ),
    RadioButtonAppi<Gender>(
      value: Gender.female,
      groupValue: selectedGender,
      onChanged: (Gender? value) {
        setState(() {
          selectedGender = value;
        });
      },
      label: 'Female',
    ),
    RadioButtonAppi<Gender>(
      value: Gender.other,
      groupValue: selectedGender,
      onChanged: (Gender? value) {
        setState(() {
          selectedGender = value;
        });
      },
      label: 'Other',
    ),
  ],
)

Custom Styled Radio Buttons

int selectedOption = 1;

RadioButtonAppi<int>(
  value: 1,
  groupValue: selectedOption,
  onChanged: (int? value) {
    setState(() {
      selectedOption = value!;
    });
  },
  label: 'Option 1',
  activeColor: Colors.green,
  splashRadius: 25,
)

Radio Button with Complex Values

class Option {
  final String id;
  final String title;
  final String description;
  
  Option(this.id, this.title, this.description);
}

Option? selectedOption;
List<Option> options = [
  Option('1', 'Basic Plan', 'Essential features'),
  Option('2', 'Pro Plan', 'Advanced features'),
  Option('3', 'Enterprise', 'All features'),
];

Column(
  children: options.map((option) => 
    RadioButtonAppi<Option>(
      value: option,
      groupValue: selectedOption,
      onChanged: (Option? value) {
        setState(() {
          selectedOption = value;
        });
      },
      label: '${option.title} - ${option.description}',
    ),
  ).toList(),
)

Disabled Radio Button

RadioButtonAppi<String>(
  value: 'disabled',
  groupValue: null,
  onChanged: null, // Disabled
  label: 'This option is disabled',
)

Best Practices

• Always use the same onChanged callback pattern for all radio buttons in a group
• Ensure all radio buttons in a group share the same groupValue
• Use descriptive labels that clearly explain each option
• Consider using enums for type-safe value management
• Group related radio buttons visually (e.g., in a Column or RadioListTile)
• Provide at least one selected option by default when appropriate
• Use toggleable: true only when deselection makes sense in your use case