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.