apptomate_custom_radio_button 0.0.2

A highly customizable radio button widget with support for any value type, optional labels, and flexible styling options.

CustomRadioButton

A highly customizable radio button widget with support for any value type, optional labels, and flexible styling options.

Features

• Type-Safe Implementation:
  • Generic <T> type support (works with Strings, enums, numbers, etc.)
  • Null-safe implementation
• Flexible Labeling:
  • Optional text label
  • Custom widget label
  • No label (standalone) option
• Visual Customization:
  • Custom active/inactive colors
  • Adjustable size
  • Custom selected/unselected icons
  • Themed defaults
• Enhanced Functionality:
  • Toggleable radio buttons
  • Custom spacing and padding
  • Vertical alignment control
• Accessibility:
  • Proper touch targets
  • Theme-aware defaults
  • Screen reader compatible

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_radio_button: ^0.0.2

Basic Usage

String? selectedOption;

CustomRadioButton<String>(
  label: "Option 1",
  value: "Option 1",
  groupValue: selectedOption,
  onChanged: (value) => setState(() => selectedOption = value),
)

Complete Examples

1. Enum-Based Radio Group

enum Options { option1, option2, option3 }
Options? selectedOption;

Column(
  children: [
    CustomRadioButton<Options>(
      label: "First Option",
      value: Options.option1,
      groupValue: selectedOption,
      onChanged: (value) => setState(() => selectedOption = value),
    ),
    CustomRadioButton<Options>(
      label: "Second Option",
      value: Options.option2,
      groupValue: selectedOption,
      activeColor: Colors.green,
      size: 30,
      onChanged: (value) => setState(() => selectedOption = value),
    ),
  ],
)

2. Custom Styled Radio Buttons

CustomRadioButton<String>(
  labelWidget: Row(
    children: [
      Icon(Icons.star, color: Colors.amber),
      Text("Premium Feature"),
    ],
  ),
  value: "premium",
  groupValue: selectedOption,
  selectedRadioIcon: Icon(Icons.check_circle, color: Colors.green),
  unSelectedRadioIcon: Icon(Icons.circle_outlined),
  spaceBetween: 16,
  onChanged: (value) => setState(() => selectedOption = value),
)

3. Toggleable Radio Buttons

CustomRadioButton<String>(
  label: "Toggle Me",
  value: "toggle",
  groupValue: selectedOption,
  toggleable: true,
  onChanged: (value) => setState(() => selectedOption = value),
)

4. Standalone Without Label

Row(
  children: [
    CustomRadioButton<String>(
      value: "compact",
      groupValue: selectedOption,
      onChanged: (value) => setState(() => selectedOption = value),
    ),
    Text("Compact Mode"),
  ],
)

Parameter Reference

Core Properties

Parameter	Type	Required	Description
value	T	Yes	Value represented by this radio button
groupValue	T?	Yes	Currently selected value for the group
onChanged	ValueChanged<T?>	Yes	Selection change callback

Label Options

Parameter	Type	Default	Description
label	String?	null	Text label
labelWidget	Widget?	null	Custom label widget
labelTextStyle	TextStyle?	null	Label text style

Visual Customization

Parameter	Type	Default	Description
activeColor	Color?	Theme primary	Color when selected
inActiveColor	Color?	Theme unselected	Color when not selected
size	double	24.0	Radio button size
selectedRadioIcon	Widget?	null	Custom selected icon
unSelectedRadioIcon	Widget?	null	Custom unselected icon

Layout Options

Parameter	Type	Default	Description
spaceBetween	double	12.0	Space between radio and label
padding	EdgeInsets?	null	Outer padding
alignment	CrossAxisAlignment	center	Label alignment

Behavior

Parameter	Type	Default	Description
toggleable	bool	false	Allow deselecting by tapping

Best Practices

1. Accessibility:

   • Ensure sufficient contrast
   • Provide meaningful labels
   • Maintain minimum touch target size (48x48dp)

2. Performance:

   • Use const constructors for static elements
   • Avoid unnecessary rebuilds

3. Internationalization:

   • Localize text labels
   • Consider RTL (right-to-left) layouts

4. State Management:

   • For complex apps, consider state management solutions
   • Persist selected value when needed

Comparison with Flutter's Radio/RadioListTile

Feature	CustomRadioButton	Flutter Radio
Value Types	Any type (<T>)	Object
Label Support	Built-in (text or widget)	Requires separate widget
Custom Icons	Yes	No
Toggleable	Yes	No
Size Control	Yes	Fixed
Standalone Mode	Yes	No
Theme Integration	Automatic	Automatic

Migration Guide

When updating from previous versions:

• Now uses generic type parameter <T>
• groupValue can be nullable
• Label is optional
• Default colors come from theme