Radio buttons in Flutter

Introduction

Radio buttons let users pick one choice from a small set of options. They make it easy to select only one item.

Choosing a payment method like Credit Card, PayPal, or Cash

Selecting a gender option: Male, Female, or Other

Picking a delivery speed: Standard, Express, or Overnight

Choosing a subscription plan: Free, Basic, or Premium

Syntax

Flutter

Radio<T>(
  value: T,
  groupValue: T,
  onChanged: (T? value) { /* update state */ },
  activeColor: Color?,
  // other optional properties
)

value is the option this radio button represents.

groupValue is the currently selected value in the group.

When value == groupValue, the radio button shows as selected.

Examples

Radio button with integer values. When clicked, updates the selected value.

Flutter

Radio<int>(
  value: 1,
  groupValue: selectedValue,
  onChanged: (int? val) { setState(() { selectedValue = val!; }); },
)

Radio button with string values and a custom active color.

Flutter

Radio<String>(
  value: 'male',
  groupValue: gender,
  onChanged: (String? val) { setState(() { gender = val!; }); },
  activeColor: Colors.blue,
)

Sample App

This app shows three radio buttons labeled Red, Green, and Blue. Only one can be selected at a time. The selected color name is shown below.

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

class _MyAppState extends State<MyApp> {
  String _selectedColor = 'red';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Radio Buttons Example')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ListTile(
              title: const Text('Red'),
              leading: Radio<String>(
                value: 'red',
                groupValue: _selectedColor,
                onChanged: (String? value) {
                  setState(() {
                    _selectedColor = value!;
                  });
                },
              ),
            ),
            ListTile(
              title: const Text('Green'),
              leading: Radio<String>(
                value: 'green',
                groupValue: _selectedColor,
                onChanged: (String? value) {
                  setState(() {
                    _selectedColor = value!;
                  });
                },
              ),
            ),
            ListTile(
              title: const Text('Blue'),
              leading: Radio<String>(
                value: 'blue',
                groupValue: _selectedColor,
                onChanged: (String? value) {
                  setState(() {
                    _selectedColor = value!;
                  });
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text('Selected color: $_selectedColor', style: const TextStyle(fontSize: 18)),
            ),
          ],
        ),
      ),
    );
  }
}

Important Notes

Always keep groupValue and value types the same.

Use setState to update the selected value so the UI refreshes.

Radio buttons are best for a few options, not many.

Summary

Radio buttons let users pick one choice from a small set.

Use value and groupValue to link buttons in a group.

Update the selected value in onChanged to refresh the UI.