Radio buttons in Flutter - Deep Dive

Overview - Radio buttons

What is it?

Radio buttons are small round buttons used in mobile apps to let users pick one option from a list. Only one radio button can be selected at a time, so choosing one will unselect the others. They help users make clear, single choices in forms or settings.

Why it matters

Without radio buttons, users might get confused about how to select only one option among many. This can lead to mistakes or frustration. Radio buttons make it easy and clear to pick exactly one choice, improving app usability and user satisfaction.

Where it fits

Before learning radio buttons, you should know how to build basic Flutter widgets and handle simple user input. After mastering radio buttons, you can learn about other input controls like checkboxes, dropdown menus, and custom selectors.

Mental Model

Core Idea

Radio buttons let users pick exactly one option from a group, ensuring a single clear choice.

Think of it like...

Choosing a radio button is like picking one flavor of ice cream from a menu where you can only have one scoop at a time.

Options Group
╔══════════════════╗
║ ( ) Option 1     ║
║ (•) Option 2     ║  <-- Selected
║ ( ) Option 3     ║
╚══════════════════╝

Build-Up - 7 Steps

1

Foundation

What are radio buttons

Concept: Radio buttons are UI elements that let users select one choice from many.

In Flutter, a radio button is a circular widget that can be selected or unselected. When one radio button in a group is selected, others automatically deselect. This ensures only one choice is active.

Result

You understand that radio buttons enforce a single selection among options.

Knowing radio buttons limit selection to one helps design clear user choices.

2

Foundation

Basic Flutter radio button usage

Concept: How to create a simple radio button in Flutter with a fixed value and group value.

Use the Radio widget with these key properties: - value: the option's value - groupValue: the currently selected value - onChanged: callback when user taps Example: Radio( value: 1, groupValue: selectedValue, onChanged: (val) => setState(() => selectedValue = val!), )

Result

You can display a radio button that changes selection when tapped.

Understanding value and groupValue links radio buttons into a group.

3

Intermediate

Managing radio button state

🤔Before reading on: do you think each radio button stores its own selected state, or is state managed outside? Commit to your answer.

Concept: Radio buttons do not store their own state; the selected value is managed externally.

In Flutter, the Radio widget is stateless. The selected option is stored in a variable outside the widget, often in the parent widget's state. When a radio button is tapped, it calls onChanged with its value. The parent updates the selected value and rebuilds the UI.

Result

You can control which radio button is selected by changing the external state variable.

Knowing that state lives outside the radio button prevents confusion and bugs.

4

Intermediate

Grouping multiple radio buttons

🤔Before reading on: do you think each radio button needs a unique groupValue, or do all share the same groupValue? Commit to your answer.

Concept: All radio buttons in a group share the same groupValue to link their selection.

To create a group, give all Radio widgets the same groupValue variable. Each Radio has a unique value. When a Radio's value matches groupValue, it appears selected. Changing groupValue updates which Radio is selected.

Result

You can create a list of radio buttons where only one is selected at a time.

Sharing groupValue connects radio buttons logically into a single choice group.

5

Intermediate

Adding labels with RadioListTile

Concept: RadioListTile combines a radio button and a label into one easy widget.

Instead of Radio plus Text, use RadioListTile: RadioListTile( title: Text('Option 1'), value: 1, groupValue: selectedValue, onChanged: (val) => setState(() => selectedValue = val!), ), This widget handles layout and tap area for you.

Result

You get a radio button with a label that is easy to tap and looks good.

Using RadioListTile simplifies UI and improves user experience.

6

Advanced

Customizing radio button appearance

🤔Before reading on: do you think Flutter's Radio widget can be styled directly, or do you need to build a custom widget? Commit to your answer.

Concept: Flutter's Radio widget has limited styling; for full control, build custom widgets.

You can change activeColor to adjust the selected color: Radio( activeColor: Colors.green, ... ) For more customization (size, shape), wrap Radio in custom widgets or create your own using GestureDetector and drawing.

Result

You can make radio buttons match your app's style or brand colors.

Knowing styling limits helps decide when to customize or build from scratch.

7

Expert

Handling radio buttons in complex forms

🤔Before reading on: do you think managing many radio groups in a form is best done with separate state variables or a centralized state? Commit to your answer.

Concept: In complex forms, managing radio button state centrally improves maintainability and consistency.

Use state management solutions like Provider, Riverpod, or Bloc to hold selected values for multiple radio groups. This avoids scattered setState calls and keeps UI reactive and clean. Also, consider validation and resetting states.

Result

Your app handles many radio button groups smoothly and scales well.

Centralized state management prevents bugs and makes complex forms easier to maintain.

Under the Hood

Flutter's Radio widget is stateless and relies on the parent widget to hold the selected value. When a user taps a radio button, it triggers onChanged with its value. The parent updates the selected value and rebuilds the UI. Flutter then compares each Radio's value to the groupValue to decide which one shows as selected. This rebuild process is efficient due to Flutter's widget tree diffing.

Why designed this way?

Flutter separates UI from state to keep widgets lightweight and reusable. This design follows the declarative UI pattern, making apps easier to reason about and test. Managing state externally avoids duplication and inconsistent UI states. Alternative designs with internal state would complicate synchronization and reduce flexibility.

User taps Radio
    ↓
Radio calls onChanged(value)
    ↓
Parent updates selectedValue
    ↓
Parent calls setState → rebuild
    ↓
Radio widgets compare value to groupValue
    ↓
Only matching Radio shows selected
    ↓
UI updates on screen

Myth Busters - 4 Common Misconceptions

Quick: Does selecting one radio button automatically unselect others without extra code? Commit yes or no.

Common Belief: Selecting a radio button automatically unselects others because each button manages its own state.

Reality: Radio buttons do not manage their own state; the parent widget controls which is selected by updating the groupValue.

Why it matters: Assuming automatic unselection leads to bugs where multiple radio buttons appear selected or none do.

Quick: Can you select multiple radio buttons in the same group? Commit yes or no.

Common Belief: You can select multiple radio buttons if you want to.

Reality: Radio buttons are designed to allow only one selection per group; for multiple selections, use checkboxes.

Why it matters: Using radio buttons for multiple selections confuses users and breaks UI conventions.

Quick: Is it okay to give different groupValue variables to radio buttons in the same group? Commit yes or no.

Common Belief: Each radio button can have its own groupValue; it doesn't have to be shared.

Reality: All radio buttons in a group must share the same groupValue variable to work correctly.

Why it matters: Different groupValues break the single-selection behavior and confuse the app logic.

Quick: Can you fully style Flutter's Radio widget like any other widget? Commit yes or no.

Common Belief: Flutter's Radio widget can be styled fully with colors, sizes, and shapes easily.

Reality: Flutter's Radio widget has limited styling options; full customization requires building custom widgets.

Why it matters: Expecting full styling leads to frustration and wasted time trying to override internal styles.

Expert Zone

1

Radio buttons rely on Flutter's rebuild mechanism; understanding widget identity and keys helps avoid unexpected UI glitches.

2

Using enums for radio button values improves code readability and reduces bugs compared to raw integers or strings.

3

Accessibility is crucial: wrapping radio buttons with proper semantics and labels ensures screen readers announce choices correctly.

When NOT to use

Avoid radio buttons when users need to select multiple options; use checkboxes instead. Also, for very long lists, dropdown menus or searchable selectors are better to save screen space.

Production Patterns

In production apps, radio buttons are often combined with form validation libraries and centralized state management. They are styled consistently with app themes and accessibility features are tested. Complex forms use grouped radio buttons with clear labels and error messages.

Connections

Checkboxes

Complementary input controls

Understanding radio buttons clarifies when to use checkboxes, which allow multiple selections, unlike radio buttons.

State management in Flutter

Builds on

Mastering radio buttons' external state control prepares you for advanced state management techniques in Flutter apps.

Human-computer interaction (HCI)

Builds on UI design principles

Knowing radio buttons' role in clear choice presentation connects to HCI principles of usability and accessibility.

Common Pitfalls

#1 Trying to store selected state inside each Radio widget.

Wrong approach:

Radio(
value: 1,
groupValue: 1,
onChanged: null,
// No external state update
)

Correct approach:

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

Root cause:

Misunderstanding that Radio widgets are stateless and require external state management.

#2 Giving different groupValue variables to radios in the same group.

Wrong approach:

Radio(value: 1, groupValue: selectedValue1, onChanged: ...)
Radio(value: 2, groupValue: selectedValue2, onChanged: ...)

Correct approach:

Radio(value: 1, groupValue: selectedValue, onChanged: ...)
Radio(value: 2, groupValue: selectedValue, onChanged: ...)

Root cause:

Not realizing groupValue must be shared to link radios into one group.

#3 Using radio buttons when multiple selections are needed.

Wrong approach:

Using multiple Radio widgets expecting users to select many options.

Correct approach:

Use Checkbox widgets for multiple selections instead of Radio buttons.

Root cause:

Confusing radio buttons' single-selection nature with checkboxes' multi-selection.

Key Takeaways

Radio buttons let users pick exactly one option from a group, making choices clear and simple.

In Flutter, radio buttons are stateless; the selected option is controlled by external state variables.

All radio buttons in a group share the same groupValue to link their selection behavior.

RadioListTile combines radio buttons with labels for better usability and cleaner code.

For complex apps, managing radio button state centrally improves maintainability and user experience.