The Radio widget in Flutter allows users to select a single option from a group of options. It's commonly used when there are multiple choices, but only one can be selected at a time. The selected value is typically represented using a state management technique (like setState, Provider, etc.).
In Flutter, a Radio button is paired with a groupValue to determine which radio button is selected. When a Radio button is tapped, the onChanged callback is triggered, which can update the selection.
¶ Component
import 'package:flutter/material.dart';
class RadioButtonComponent<T> extends StatelessWidget {
final List<T> items; // List of radio button values
final T? selectedValue; // The currently selected value
final ValueChanged<T?> onChanged; // Callback to handle selection change
final Widget Function(T) labelBuilder; // Function to build labels for each radio button
final Color? activeColor;
final bool toggleable;
const RadioButtonComponent({
Key? key,
required this.items,
required this.selectedValue,
required this.onChanged,
required this.labelBuilder,
this.activeColor,
this.toggleable = false,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: items.map((item) {
return ListTile(
leading: Radio<T>(
value: item,
groupValue: selectedValue,
onChanged: onChanged,
activeColor: activeColor,
toggleable: toggleable,
),
title: labelBuilder(item), // Dynamically generate label
);
}).toList(),
);
}
}¶ How to Use
import 'package:flutter/material.dart';
import 'radio_button_component.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int? _selectedValue = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Radio Group Component Example')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
// Dynamically generated radio group
RadioButtonComponent<int>(
items: [1, 2, 3], // Dynamic list of radio button values
selectedValue: _selectedValue, // The currently selected value
onChanged: (int? value) {
setState(() {
_selectedValue = value;
});
},
labelBuilder: (value) => Text('Option $value'), // Labels for the radio buttons
activeColor: Colors.green, // Custom active color
),
],
),
),
),
);
}
}
¶ Properties
¶ 1. items
A list of values that represent each radio button in the group. Each value corresponds to a radio button.
RadioButtonComponent<int>(
items: [1, 2, 3],
selectedValue: _selectedValue,
onChanged: (int? value) {
setState(() {
_selectedValue = value;
});
},
labelBuilder: (value) => Text('Option $value'),
)
¶ 2. selectedValue
The value of the currently selected radio button. This value is compared with the value of each radio button to determine which one is selected.
RadioButtonComponent<int>(
items: [1, 2, 3],
selectedValue: _selectedValue,
onChanged: (int? value) {
setState(() {
_selectedValue = value;
});
},
)
¶ 3. onChanged
A callback function that is triggered when the user selects a radio button. It receives the selected value and can update the state accordingly.
RadioButtonComponent<int>(
items: [1, 2, 3],
selectedValue: _selectedValue,
onChanged: (int? value) {
setState(() {
_selectedValue = value;
});
},
)
¶ 4. labelBuilder
A function that builds the label for each radio button. It takes the value of the radio button and returns a widget (usually a Text widget) to display as the label.
RadioButtonComponent<int>(
items: [1, 2, 3],
selectedValue: _selectedValue,
labelBuilder: (value) => Text('Option $value'),
)
¶ 5. activeColor
The color of the radio button when selected. By default, the active color is the primary color of the theme.
RadioButtonComponent<int>(
items: [1, 2, 3],
selectedValue: _selectedValue,
activeColor: Colors.blue, // Change active color
onChanged: (int? value) {
setState(() {
_selectedValue = value;
});
},
)
¶ 6. toggleable
If true, selecting the already selected radio button will unselect it.
RadioButtonComponent<int>(
items: [1, 2, 3],
selectedValue: _selectedValue,
toggleable: true, // Enable toggling selection
onChanged: (int? value) {
setState(() {
_selectedValue = value;
});
},
)