Checkbox and Switch in Flutter

Introduction

Checkboxes and switches let users choose options easily by tapping. They show if something is on or off.

When you want users to select one or more options from a list.

When you want a simple on/off toggle for settings.

When you want to confirm choices like agreeing to terms.

When you want to enable or disable features quickly.

When you want a clear visual state for user preferences.

Syntax

Flutter

Checkbox(
  value: isChecked,
  onChanged: (bool? newValue) {
    setState(() {
      isChecked = newValue!;
    });
  },
)

Switch(
  value: isSwitchedOn,
  onChanged: (bool newValue) {
    setState(() {
      isSwitchedOn = newValue;
    });
  },
)

Checkbox uses a nullable bool in onChanged because it can be tristate (true, false, null).

Switch is a simple on/off toggle with a non-nullable bool.

Examples

This checkbox is checked and disabled (user cannot change it).

Flutter

Checkbox(
  value: true,
  onChanged: null,
)

This switch starts off and prints the new value when toggled.

Flutter

Switch(
  value: false,
  onChanged: (val) => print('Switched: $val'),
)

A checkbox that updates its state when tapped.

Flutter

Checkbox(
  value: isChecked,
  onChanged: (val) {
    setState(() {
      isChecked = val!;
    });
  },
)

A switch that toggles on/off and updates UI.

Flutter

Switch(
  value: isSwitchedOn,
  onChanged: (val) {
    setState(() {
      isSwitchedOn = val;
    });
  },
)

Sample App

This app shows a checkbox and a switch with labels. When you tap them, their state changes and the text below updates to show the current state.

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> {
  bool isChecked = false;
  bool isSwitchedOn = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Checkbox and Switch Example')),
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                children: [
                  Checkbox(
                    value: isChecked,
                    onChanged: (bool? value) {
                      setState(() {
                        isChecked = value!;
                      });
                    },
                  ),
                  const Text('Accept Terms'),
                ],
              ),
              const SizedBox(height: 20),
              Row(
                children: [
                  Switch(
                    value: isSwitchedOn,
                    onChanged: (bool value) {
                      setState(() {
                        isSwitchedOn = value;
                      });
                    },
                  ),
                  const Text('Enable Notifications'),
                ],
              ),
              const SizedBox(height: 40),
              Text('Checkbox is: ${isChecked ? 'Checked' : 'Unchecked'}'),
              Text('Switch is: ${isSwitchedOn ? 'On' : 'Off'}'),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

Always wrap Checkbox and Switch in a stateful widget to update UI on changes.

Use labels next to controls for better accessibility and clarity.

Checkbox can have a tristate mode (true, false, null) if needed by setting tristate: true.

Summary

Checkbox and Switch let users toggle options on or off.

Checkbox can select multiple options; Switch is for simple on/off settings.

Use setState to update the UI when the user changes the value.

Practice

1. What is the main difference between a Checkbox and a Switch in Flutter?

easy

A. Checkbox requires a controller; Switch does not.

B. Checkbox allows multiple selections; Switch is for a single on/off choice.

C. Checkbox changes color automatically; Switch does not.

D. Checkbox is only for iOS; Switch is only for Android.

Solution

1. Step 1: Understand Checkbox behavior

   A Checkbox lets users select multiple options independently.

2. Step 2: Understand Switch behavior

   A Switch is a toggle for a single on/off setting, not multiple selections.

3. Final Answer:

   Checkbox allows multiple selections; Switch is for a single on/off choice. -> Option B

4. Quick Check:

   Checkbox = multiple, Switch = single toggle [OK]

Hint: Checkbox = multiple choices, Switch = single toggle [OK]

Common Mistakes:

• Thinking Switch can select multiple options
• Confusing platform-specific behavior
• Assuming Checkbox needs a controller

2. Which of the following is the correct way to create a Checkbox widget with a boolean value isChecked and update it on change?

easy

A. Checkbox(checked: isChecked, onChange: (val) => setState(() => isChecked = val))

B. Checkbox(value: isChecked, onChanged: (val) { isChecked = val })

C. Checkbox(value: isChecked, onChanged: (val) => isChecked = val)

D. Checkbox(value: isChecked, onChanged: (val) => setState(() => isChecked = val!))

Solution

1. Step 1: Check property names

   The correct property for Checkbox state is value and the callback is onChanged.

2. Step 2: Use setState to update UI

   Inside onChanged, use setState to update isChecked with the new value.

3. Final Answer:

   Checkbox(value: isChecked, onChanged: (val) => setState(() => isChecked = val!)) -> Option D

4. Quick Check:

   Use value and onChanged with setState [OK]

Hint: Use value and onChanged with setState to update [OK]

Common Mistakes:

• Missing setState causing UI not to update
• Using wrong property names like checked or onChange
• Not unwrapping nullable bool with val!

3. What will be the output behavior of this Flutter code snippet?

bool isSwitched = false;

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

medium

A. The switch toggles visually and updates the UI correctly.

B. The code causes a compile-time error due to missing setState.

C. The switch does not toggle visually because setState is missing.

D. The switch toggles but the value never changes.

Solution

1. Step 1: Analyze state update

   The variable isSwitched is updated but not inside setState.

2. Step 2: Understand UI update mechanism

   Without setState, Flutter does not rebuild the widget, so UI won't reflect changes.

3. Final Answer:

   The switch does not toggle visually because setState is missing. -> Option C

4. Quick Check:

   Missing setState means no UI update [OK]

Hint: Always wrap state changes in setState for UI update [OK]

Common Mistakes:

• Assuming variable change updates UI automatically
• Confusing compile error with runtime behavior
• Ignoring setState importance

4. Identify the error in this Flutter code for a Checkbox:

bool checked = false;

Checkbox(
  value: checked,
  onChanged: (bool val) {
    checked = val;
  },
)

medium

A. Missing setState call to update the UI.

B. Incorrect type for onChanged parameter.

C. Checkbox widget requires a controller.

D. Value property should be named checked.

Solution

1. Step 1: Check state update method

   The variable checked is updated but not inside setState.

2. Step 2: Understand Flutter UI update

   Without setState, the UI will not rebuild to reflect the new value.

3. Final Answer:

   Missing setState call to update the UI. -> Option A

4. Quick Check:

   State changes need setState for UI refresh [OK]

Hint: Use setState to refresh UI after state changes [OK]

Common Mistakes:

• Forgetting setState causes no UI update
• Thinking Checkbox needs a controller
• Confusing parameter types

5. You want to create a settings page with two options: "Enable Notifications" (Switch) and "Accept Terms" (Checkbox). How should you manage their states to update the UI correctly when toggled?

hard

A. Use two boolean variables and update each inside setState when toggled.

B. Use a single boolean variable for both widgets and update it in setState.

C. Use final variables since the UI does not need to change after initial build.

D. Use global variables outside the widget and update them without setState.

Solution

1. Step 1: Identify separate states

   Each widget needs its own boolean variable to track its state independently.

2. Step 2: Update states with setState

   Wrap each state change inside setState to rebuild the UI correctly.

3. Final Answer:

   Use two boolean variables and update each inside setState when toggled. -> Option A

4. Quick Check:

   Separate booleans + setState = correct UI update [OK]

Hint: Use separate booleans and setState for each toggle [OK]

Common Mistakes:

• Using one variable for multiple toggles
• Not using setState causing UI freeze
• Using final variables preventing changes