The ChromiaRadioButton widgets allow users to select a single option from a set of options.
Basic Usage
import 'package:chromia_ui/chromia_ui.dart';
String selectedValue = 'option1';
ChromiaRadioButton<String>(
value: 'option1',
groupValue: selectedValue,
onChanged: (value) => setState(() => selectedValue = value!),
)
With Label
Add a label next to the radio button:
String selectedOption = 'option1';
ChromiaRadioButton<String>(
value: 'option1',
groupValue: selectedOption,
label: 'Option 1',
onChanged: (value) => setState(() => selectedOption = value!),
)
Radio Button Group
Create a group of radio buttons with automatic layout:
Vertical Layout (Default)
String selectedValue = 'option1';
ChromiaRadioButtonGroup<String>(
value: selectedValue,
onChanged: (value) => setState(() => selectedValue = value!),
items: [
ChromiaRadioButtonItem(value: 'option1', label: 'Option 1'),
ChromiaRadioButtonItem(value: 'option2', label: 'Option 2'),
ChromiaRadioButtonItem(value: 'option3', label: 'Option 3'),
],
)
Horizontal Layout
ChromiaRadioButtonGroup<String>(
value: selectedValue,
direction: Axis.horizontal,
onChanged: (value) => setState(() => selectedValue = value!),
items: [
ChromiaRadioButtonItem(value: 'small', label: 'Small'),
ChromiaRadioButtonItem(value: 'medium', label: 'Medium'),
ChromiaRadioButtonItem(value: 'large', label: 'Large'),
],
)
Custom Colors
Customize the radio button color:
ChromiaRadioButton<String>(
value: 'premium',
groupValue: selectedPlan,
label: 'Premium Plan',
activeColor: Colors.purple,
onChanged: (value) => setState(() => selectedPlan = value!),
)
Custom Size
Adjust the radio button size:
ChromiaRadioButton<String>(
value: 'option1',
groupValue: selectedValue,
size: 24.0,
onChanged: (value) => setState(() => selectedValue = value!),
)
Custom Thumb Scale
Adjust the inner circle (thumb) size:
ChromiaRadioButton<String>(
value: 'option1',
groupValue: selectedValue,
thumbScale: 0.5, // 0.0 to 1.0
onChanged: (value) => setState(() => selectedValue = value!),
)
Disabled State
Disable radio buttons by setting onChanged to null:
ChromiaRadioButton<String>(
value: 'option1',
groupValue: selectedValue,
label: 'Disabled option',
onChanged: null,
)
With Custom Spacing
ChromiaRadioButtonGroup<String>(
value: selectedValue,
spacing: 24.0,
runSpacing: 16.0,
onChanged: (value) => setState(() => selectedValue = value!),
items: [
ChromiaRadioButtonItem(value: 'option1', label: 'Option 1'),
ChromiaRadioButtonItem(value: 'option2', label: 'Option 2'),
],
)
ChromiaRadioButton Parameters
The value represented by this radio button.
The currently selected value for the group.
onChanged
ValueChanged<T?>?
required
Called when the user selects this radio button. Set to null to disable.
Optional label text displayed next to the radio button.
The size of the radio button.
The scale of the thumb when selected (0.0 to 1.0).
ChromiaRadioButtonGroup Parameters
The currently selected value.
Called when the selection changes.
items
List<ChromiaRadioButtonItem<T>>
required
The list of items to display.
direction
Axis
default:"Axis.vertical"
The direction to layout the radio buttons. Options: Axis.vertical, Axis.horizontal.
Run spacing for wrapped layouts.
ChromiaRadioButtonItem
Use Cases
Subscription Plans
String selectedPlan = 'basic';
ChromiaRadioButtonGroup<String>(
value: selectedPlan,
onChanged: (value) => setState(() => selectedPlan = value!),
items: [
ChromiaRadioButtonItem(
value: 'basic',
label: 'Basic - \$9.99/month',
),
ChromiaRadioButtonItem(
value: 'premium',
label: 'Premium - \$19.99/month',
),
ChromiaRadioButtonItem(
value: 'enterprise',
label: 'Enterprise - Contact us',
),
],
)
Payment Method Selection
enum PaymentMethod { creditCard, paypal, bankTransfer }
PaymentMethod selectedMethod = PaymentMethod.creditCard;
Column(
children: [
ChromiaRadioButton<PaymentMethod>(
value: PaymentMethod.creditCard,
groupValue: selectedMethod,
label: 'Credit Card',
onChanged: (value) => setState(() => selectedMethod = value!),
),
ChromiaRadioButton<PaymentMethod>(
value: PaymentMethod.paypal,
groupValue: selectedMethod,
label: 'PayPal',
onChanged: (value) => setState(() => selectedMethod = value!),
),
ChromiaRadioButton<PaymentMethod>(
value: PaymentMethod.bankTransfer,
groupValue: selectedMethod,
label: 'Bank Transfer',
onChanged: (value) => setState(() => selectedMethod = value!),
),
],
)
Size Selection
String selectedSize = 'M';
ChromiaRadioButtonGroup<String>(
value: selectedSize,
direction: Axis.horizontal,
spacing: 16,
onChanged: (value) => setState(() => selectedSize = value!),
items: [
ChromiaRadioButtonItem(value: 'XS', label: 'XS'),
ChromiaRadioButtonItem(value: 'S', label: 'S'),
ChromiaRadioButtonItem(value: 'M', label: 'M'),
ChromiaRadioButtonItem(value: 'L', label: 'L'),
ChromiaRadioButtonItem(value: 'XL', label: 'XL'),
],
)
Question with Options
int? selectedAnswer;
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'What is the capital of France?',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 16),
ChromiaRadioButtonGroup<int>(
value: selectedAnswer,
onChanged: (value) => setState(() => selectedAnswer = value),
items: [
ChromiaRadioButtonItem(value: 1, label: 'London'),
ChromiaRadioButtonItem(value: 2, label: 'Berlin'),
ChromiaRadioButtonItem(value: 3, label: 'Paris'),
ChromiaRadioButtonItem(value: 4, label: 'Madrid'),
],
),
],
)
