Checkbox and Switch in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Checkbox State Change Behavior

What will be the value of the variable isChecked after tapping the checkbox twice in this Flutter code snippet?

Flutter

bool isChecked = false;
Checkbox(
  value: isChecked,
  onChanged: (bool? value) {
    isChecked = value ?? false;
  },
);

A Throws an error

B true

C null

D false

💡 Hint

Think about how the checkbox toggles its value each tap.

The checkbox toggles from false to true on the first tap, then true to false on the second tap. After two taps, it returns to false. But since the question asks after tapping twice, the final value is false.

📝 Syntax

intermediate

Correct Switch Widget Syntax

Which option shows the correct syntax to create a Switch widget that toggles a boolean isSwitched variable in Flutter?

A Switch(value: isSwitched, onChanged: (value) => isSwitched == value)

B Switch(isOn: isSwitched, onToggle: (value) => isSwitched = value)

C Switch(value: isSwitched, onChanged: (bool value) { setState(() { isSwitched = value; }); })

D Switch(state: isSwitched, onChanged: (bool value) { isSwitched = value; })

💡 Hint

Check the official Flutter Switch widget properties.

Option C uses the correct property names and updates the state properly inside setState. Other options use wrong property names or incorrect assignment.

❓ lifecycle

advanced

State Update Timing with Checkbox

In a StatefulWidget, if you update the checkbox state variable isChecked without calling setState(), what happens to the UI?

Flutter

bool isChecked = false;
Checkbox(
  value: isChecked,
  onChanged: (bool? value) {
    isChecked = value ?? false;
    // Missing setState call
  },
);

A The checkbox UI does not update to reflect the new value.

B The checkbox UI updates correctly anyway.

C The app crashes with an error.

D The checkbox toggles but reverts immediately.

💡 Hint

Remember how Flutter knows to redraw widgets.

Without calling setState, Flutter does not know the state changed, so it does not rebuild the widget. The UI stays the same even if the variable changes.

❓ navigation

advanced

Passing Checkbox State Between Screens

You want to pass the checkbox state isChecked from Screen A to Screen B in Flutter. Which approach correctly passes the value during navigation?

A Navigator.pushNamed(context, '/screenB'); // isChecked is global variable

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

C Navigator.push(context, MaterialPageRoute(builder: (_) => ScreenB())); // ScreenB reads isChecked directly

D Navigator.pop(context, isChecked);

💡 Hint

Think about how to send data when opening a new screen.

Option B passes the value explicitly via the constructor when navigating. Option B assumes a global variable which is not safe. Option B does not pass the value. Option B is for returning data back, not passing forward.

🔧 Debug

expert

Why Does the Switch Not Toggle Visually?

Given this Flutter code snippet, why does the Switch not visually toggle when tapped?

Flutter

bool isSwitched = false;

Widget build(BuildContext context) {
  return Switch(
    value: isSwitched,
    onChanged: (bool value) {
      isSwitched = value;
    },
  );
}

A Because setState is not called, so UI does not rebuild.

B Because the value property is incorrectly set to false.

C Because onChanged callback is missing.

D Because Switch requires a controller to toggle.

💡 Hint

How does Flutter know to redraw widgets?

Without calling setState, Flutter does not rebuild the widget tree, so the visual state does not update even if the variable changes.