Radio buttons in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Radio Button Selection Behavior

What will be the displayed text when the user selects the second radio button?

Flutter

import 'package:flutter/material.dart';

class RadioExample extends StatefulWidget {
  @override
  State<RadioExample> createState() => _RadioExampleState();
}

class _RadioExampleState extends State<RadioExample> {
  int _selectedValue = 1;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Radio<int>(
          value: 1,
          groupValue: _selectedValue,
          onChanged: (value) {
            setState(() {
              _selectedValue = value!;
            });
          },
        ),
        Radio<int>(
          value: 2,
          groupValue: _selectedValue,
          onChanged: (value) {
            setState(() {
              _selectedValue = value!;
            });
          },
        ),
        Text('Selected: $_selectedValue'),
      ],
    );
  }
}

A Selected: 1

B Selected: null

C Selected: 2

D No text displayed

💡 Hint

Check how the _selectedValue changes when a radio button is tapped.

The _selectedValue updates to the value of the tapped radio button. Selecting the second radio button sets it to 2, so the text shows 'Selected: 2'.

📝 Syntax

intermediate

Correct Radio Button GroupValue Type

Which option correctly fixes the type error in this Flutter radio button snippet?

Flutter

Radio(
  value: 'A',
  groupValue: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)

A Change <code>value</code> to int and <code>selectedValue</code> to int.

B Change <code>selectedValue</code> type to String and cast <code>value</code> to String in <code>onChanged</code>.

C Remove <code>groupValue</code> property.

D Set <code>onChanged</code> to null.

💡 Hint

Radio button value and groupValue must be the same type.

The value is a String ('A'), so selectedValue must also be a String. Casting value in onChanged ensures type safety.

❓ lifecycle

advanced

State Update Timing with Radio Buttons

What happens if you call setState outside the onChanged callback after selecting a radio button?

A The UI does not update because <code>setState</code> was not called inside <code>onChanged</code>.

B The UI updates immediately reflecting the new selection.

C The app crashes with a runtime error.

D The UI updates only after a hot reload.

💡 Hint

Consider when Flutter rebuilds widgets after state changes.

Calling setState outside the onChanged callback means the state change is not triggered by the user action, so the UI does not update immediately.

❓ navigation

advanced

Radio Button Selection and Navigation

In a Flutter app, you want to navigate to a new screen only when a specific radio button is selected. Which code snippet correctly performs this navigation?

Flutter

Radio<int>(
  value: 2,
  groupValue: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value!;
    });
    // Navigation code here
  },
)

A if (value == 2) Navigator.push(context, MaterialPageRoute(builder: (_) => NewScreen()));

B Navigator.push(context, MaterialPageRoute(builder: (_) => NewScreen()));

C if (selectedValue == 2) Navigator.pop(context);

D Navigator.pop(context);

💡 Hint

Check the condition before navigation and use Navigator.push to go forward.

Navigation should happen only if the selected value is 2. Using Navigator.push with a condition inside onChanged ensures correct behavior.

🔧 Debug

expert

Debugging Radio Button State Not Updating

Why does this Flutter radio button not update the UI when tapped?

Flutter

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int selected = 0;

  @override
  Widget build(BuildContext context) {
    return Radio<int>(
      value: 1,
      groupValue: selected,
      onChanged: (val) {
        setState(() {
          selected = val!;
        });
      },
    );
  }
}

A Because <code>selected</code> is initialized to 0 instead of 1.

B Because <code>groupValue</code> and <code>value</code> types do not match.

C Because <code>onChanged</code> is null.

D Because <code>setState</code> is not called after updating <code>selected</code>.

💡 Hint

State changes must be wrapped in setState to trigger UI rebuild.

Updating the state variable alone does not rebuild the widget. Wrapping the update inside setState tells Flutter to redraw the UI.