How to Create Radio Button in Flutter: Simple Guide

In Flutter, create radio buttons using the Radio widget combined with a state variable to track the selected value. Use the groupValue property to link radio buttons and onChanged to update the selection when tapped.

Syntax

The Radio widget requires three main properties:

• value: The value this radio button represents.
• groupValue: The currently selected value in the group.
• onChanged: A callback to update the selected value when the user taps the radio button.

These properties work together to create a group of radio buttons where only one can be selected at a time.

dart

Radio<T>({
  required T value,
  required T? groupValue,
  required ValueChanged<T?>? onChanged,
  Key? key,
  Color? activeColor,
  MaterialStateProperty<Color?>? fillColor,
  bool toggleable = false,
  MouseCursor? mouseCursor,
  VisualDensity? visualDensity,
  FocusNode? focusNode,
  bool autofocus = false,
  String? semanticLabel,
})

Example

This example shows a simple Flutter app with three radio buttons labeled "Option 1", "Option 2", and "Option 3". Selecting a radio button updates the displayed selected option.

dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int? _selectedValue = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Radio Button Example')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              children: [
                Radio<int>(
                  value: 1,
                  groupValue: _selectedValue,
                  onChanged: (int? value) {
                    setState(() {
                      _selectedValue = value;
                    });
                  },
                ),
                const Text('Option 1'),
              ],
            ),
            Row(
              children: [
                Radio<int>(
                  value: 2,
                  groupValue: _selectedValue,
                  onChanged: (int? value) {
                    setState(() {
                      _selectedValue = value;
                    });
                  },
                ),
                const Text('Option 2'),
              ],
            ),
            Row(
              children: [
                Radio<int>(
                  value: 3,
                  groupValue: _selectedValue,
                  onChanged: (int? value) {
                    setState(() {
                      _selectedValue = value;
                    });
                  },
                ),
                const Text('Option 3'),
              ],
            ),
            const SizedBox(height: 20),
            Text('Selected option: ${_selectedValue ?? 'None'}'),
          ],
        ),
      ),
    );
  }
}

Output

A screen with three radio buttons labeled Option 1, Option 2, Option 3 vertically arranged. Selecting one highlights its circle and updates the text below to show the selected option number.

Common Pitfalls

Common mistakes when using radio buttons in Flutter include:

• Not using a shared groupValue for all radio buttons in the group, causing multiple selections.
• Forgetting to call setState inside onChanged, so UI does not update.
• Using non-unique value properties, which confuses selection logic.

Always ensure the groupValue matches the selected value and onChanged updates the state properly.

dart

/* Wrong: Missing setState, UI won't update */
Radio<int>(
  value: 1,
  groupValue: _selectedValue,
  onChanged: (int? value) {
    _selectedValue = value; // No setState, UI stays same
  },
)

/* Right: Using setState to update UI */
Radio<int>(
  value: 1,
  groupValue: _selectedValue,
  onChanged: (int? value) {
    setState(() {
      _selectedValue = value;
    });
  },
)

Quick Reference

• value: Unique value for each radio button.
• groupValue: The selected value shared by the group.
• onChanged: Updates the selected value and UI.
• Wrap radio buttons in a StatefulWidget to manage selection state.
• Use setState to refresh UI on selection change.

Key Takeaways

Use the Radio widget with value, groupValue, and onChanged to create radio buttons.

Manage the selected option state in a StatefulWidget and update it with setState.

Ensure all radio buttons in a group share the same groupValue to allow single selection.

Always call setState inside onChanged to refresh the UI when selection changes.

Use unique values for each radio button to avoid selection conflicts.