How to Use Radio Buttons in Flutter

27.07.2023 — Flutter, Radio Button — 1 min read

Radio buttons are a popular UI element that allows users to select one option from a predefined list of options. In this tutorial, we will explore how to use radio buttons in Flutter to create an intuitive user interface.

Basic Radio Button

The basic radio button is created using the Radio widget. Let's take a look at an example where we have a list of colors, and the user can select one color using a radio button:

1enum ColorOptions {
2  red,
3  green,
4  blue,
5}
6
7class MyHomePage extends StatefulWidget {
8  const MyHomePage({Key? key}) : super(key: key);
9
10  @override
11  State<MyHomePage> createState() => _MyHomePageState();
12}
13
14class _MyHomePageState extends State<MyHomePage> {
15  ColorOptions? _selectedColor;
16
17  void _handleColorSelection(ColorOptions? value) {
18    setState(() {
19      _selectedColor = value;
20    });
21  }
22
23  @override
24  Widget build(BuildContext context) {
25    return Scaffold(
26      appBar: AppBar(
27        title: const Text('Radio Button Example'),
28      ),
29      body: Column(
30        crossAxisAlignment: CrossAxisAlignment.start,
31        children: [
32          RadioListTile<ColorOptions>(
33            title: const Text('Red'),
34            value: ColorOptions.red,
35            groupValue: _selectedColor,
36            onChanged: _handleColorSelection,
37          ),
38          RadioListTile<ColorOptions>(
39            title: const Text('Green'),
40            value: ColorOptions.green,
41            groupValue: _selectedColor,
42            onChanged: _handleColorSelection,
43          ),
44          RadioListTile<ColorOptions>(
45            title: const Text('Blue'),
46            value: ColorOptions.blue,
47            groupValue: _selectedColor,
48            onChanged: _handleColorSelection,
49          ),
50        ],
51      ),
52    );
53  }
54}

The RadioListTile widget creates a clickable tile with the text and radio button. The groupValue parameter is used to determine which option is currently selected. The onChanged callback is called when the user selects an option, and it updates the state with the selected value.

Custom Radio Button

You can also create custom radio buttons using the Radio widget. Here's an example where we have a list of pizza toppings, and the user can select one topping using a radio button:

1enum ToppingOptions {
2  pepperoni,
3  mushrooms,
4  onions,
5}
6
7class MyHomePage extends StatefulWidget {
8  const MyHomePage({Key? key}) : super(key: key);
9
10  @override
11  State<MyHomePage> createState() => _MyHomePageState();
12}
13
14class _MyHomePageState extends State<MyHomePage> {
15  ToppingOptions? _selectedTopping;
16
17  void _handleToppingSelection(ToppingOptions? value) {
18    setState(() {
19      _selectedTopping = value;
20    });
21  }
22
23  Widget _buildToppingOption(ToppingOptions option, String label) {
24    return Row(
25      children: [
26        Radio<ToppingOptions>(
27          value: option,
28          groupValue: _selectedTopping,
29          onChanged: _handleToppingSelection,
30        ),
31        Text(label),
32      ],
33    );
34  }
35
36  @override
37  Widget build(BuildContext context) {
38    return Scaffold(
39      appBar: AppBar(
40        title: const Text('Radio Button Example'),
41      ),
42      body: Column(
43        crossAxisAlignment: CrossAxisAlignment.start,
44        children: [
45          _buildToppingOption(ToppingOptions.pepperoni, 'Pepperoni'),
46          _buildToppingOption(ToppingOptions.mushrooms, 'Mushrooms'),
47          _buildToppingOption(ToppingOptions.onions, 'Onions'),
48        ],
49      ),
50    );
51  }
52}

In this example, we create a custom widget _buildToppingOption that combines the Radio widget and a Text widget. This allows us to customize the layout of the radio button and label.

Conclusion

In summary, radio buttons are a useful UI element for selecting one option from a list of options. In this tutorial, we explored how to use radio buttons in Flutter to create a simple and intuitive user interface.