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.

Practice

1.

What is the main purpose of a Radio button in Flutter?

easy

A. To display an image

B. To let the user enter text input

C. To navigate between screens

D. To allow the user to select only one option from a group

Solution

1. Step 1: Understand Radio button usage

   Radio buttons are designed to let users pick one choice from a small set of options.

2. Step 2: Compare with other UI elements

   Text input is for typing, images display pictures, navigation moves screens, so these are not correct.

3. Final Answer:

   To allow the user to select only one option from a group -> Option D

4. Quick Check:

   Radio button = single choice selector [OK]

Hint: Radio buttons always pick one from many [OK]

Common Mistakes:

• Confusing radio buttons with checkboxes
• Thinking radio buttons accept text input
• Assuming radio buttons navigate screens

2.

Which of the following is the correct way to declare a Radio button with value 1 and groupValue 2?

Radio( ... )

easy

A. Radio(1, 2, onChanged: (val) {})

B. Radio(value: 1, groupValue: 2, onChanged: (val) {})

C. Radio(value: '1', groupValue: '2', onChanged: (val) {})

D. Radio(value = 1, groupValue = 2, onChanged = (val) {})

Solution

1. Step 1: Check Dart named parameter syntax

   Flutter widgets use named parameters with colons, e.g., value: 1, groupValue: 2.

2. Step 2: Validate parameter types

   Values should be integers here, so strings are incorrect. Also, positional parameters are not allowed.

3. Final Answer:

   Radio(value: 1, groupValue: 2, onChanged: (val) {}) -> Option B

4. Quick Check:

   Use named parameters with colons [OK]

Hint: Use colons for named parameters in Flutter widgets [OK]

Common Mistakes:

• Using equals sign (=) instead of colon (:)
• Passing values as strings instead of correct type
• Using positional parameters instead of named

3.

What will be the selected radio button after this code runs?

int selected = 2;

Column(
  children: [
    Radio(value: 1, groupValue: selected, onChanged: (val) {}),
    Radio(value: 2, groupValue: selected, onChanged: (val) {}),
    Radio(value: 3, groupValue: selected, onChanged: (val) {}),
  ],
)

medium

A. The radio button with value 2

B. The radio button with value 1

C. The radio button with value 3

D. No radio button selected

Solution

1. Step 1: Understand groupValue and value relation

   The radio button whose value matches groupValue is selected.

2. Step 2: Check the values

   groupValue is 2, so the radio with value 2 is selected.

3. Final Answer:

   The radio button with value 2 -> Option A

4. Quick Check:

   Selected = groupValue match [OK]

Hint: Selected radio matches groupValue [OK]

Common Mistakes:

• Confusing value and groupValue roles
• Assuming first radio is selected by default
• Ignoring groupValue in selection

4.

Identify the error in this Flutter code snippet for radio buttons:

int selected = 1;

Radio(
  value: 1,
  groupValue: selected,
  onChanged: null,
)

medium

A. value and groupValue must be strings

B. selected should be a boolean

C. onChanged should not be null to allow selection

D. Radio widget cannot be used inside Column

Solution

1. Step 1: Check onChanged parameter

   onChanged must be a function to update selection; null disables interaction.

2. Step 2: Validate other parameters

   value and groupValue can be int; selected as int is correct; Radio can be inside Column.

3. Final Answer:

   onChanged should not be null to allow selection -> Option C

4. Quick Check:

   onChanged null disables radio [OK]

Hint: onChanged must be non-null for radio to work [OK]

Common Mistakes:

• Setting onChanged to null disables selection
• Confusing data types for value/groupValue
• Thinking Radio can't be inside layout widgets

5.

You want to create a group of radio buttons for colors: Red, Green, Blue. The selected color should update the UI when tapped. Which code snippet correctly implements this behavior?

class ColorSelector extends StatefulWidget {
  @override
  State<ColorSelector> createState() => _ColorSelectorState();
}

class _ColorSelectorState extends State<ColorSelector> {
  String selectedColor = 'Red';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Radio<String>(
          value: 'Red',
          groupValue: selectedColor,
          onChanged: (val) {
            setState(() {
              selectedColor = val!;
            });
          },
        ),
        Radio<String>(
          value: 'Green',
          groupValue: selectedColor,
          onChanged: (val) {
            setState(() {
              selectedColor = val!;
            });
          },
        ),
        Radio<String>(
          value: 'Blue',
          groupValue: selectedColor,
          onChanged: (val) {
            setState(() {
              selectedColor = val!;
            });
          },
        ),
      ],
    );
  }
}

hard

A. The code correctly updates selectedColor and UI on tap

B. Missing setState call inside onChanged

C. groupValue should be a boolean, not String

D. Radio buttons cannot use String values

Solution

1. Step 1: Check state update on tap

   onChanged calls setState to update selectedColor, which triggers UI refresh.

2. Step 2: Validate types and usage

   groupValue and value are Strings, which is allowed and consistent.

3. Step 3: Confirm UI rebuild

   setState ensures the widget rebuilds with new selectedColor, updating radio selection.

4. Final Answer:

   The code correctly updates selectedColor and UI on tap -> Option A

5. Quick Check:

   setState + matching groupValue = UI update [OK]

Hint: Use setState in onChanged to update selection [OK]

Common Mistakes:

• Forgetting to call setState to refresh UI
• Using wrong types for groupValue
• Assuming Radio buttons can't use strings