Checkbox and Switch in Flutter - Mini App: Build & Ship

Build: Settings Toggle Screen

A simple settings screen where users can toggle options using checkboxes and switches.

Target UI

Settings Toggle Screen

[ ] Enable Notifications
( ) Dark Mode

[Save Button]

Add a Checkbox labeled 'Enable Notifications' that toggles a boolean value.

Add a Switch labeled 'Dark Mode' that toggles a boolean value.

Add a Save button that shows a SnackBar confirming the current settings.

Starter Code

Flutter

import 'package:flutter/material.dart';

class SettingsToggleScreen extends StatefulWidget {
  @override
  State<SettingsToggleScreen> createState() => _SettingsToggleScreenState();
}

class _SettingsToggleScreenState extends State<SettingsToggleScreen> {
  bool notificationsEnabled = false;
  bool darkModeEnabled = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Settings Toggle Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // TODO: Add Checkbox for Enable Notifications
            // TODO: Add Switch for Dark Mode
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // TODO: Show SnackBar with current settings
              },
              child: Text('Save'),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class SettingsToggleScreen extends StatefulWidget {
  @override
  State<SettingsToggleScreen> createState() => _SettingsToggleScreenState();
}

class _SettingsToggleScreenState extends State<SettingsToggleScreen> {
  bool notificationsEnabled = false;
  bool darkModeEnabled = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Settings Toggle Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            CheckboxListTile(
              title: Text('Enable Notifications'),
              value: notificationsEnabled,
              onChanged: (bool? value) {
                setState(() {
                  notificationsEnabled = value ?? false;
                });
              },
            ),
            SwitchListTile(
              title: Text('Dark Mode'),
              value: darkModeEnabled,
              onChanged: (bool value) {
                setState(() {
                  darkModeEnabled = value;
                });
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                final snackBar = SnackBar(
                  content: Text('Notifications: ${notificationsEnabled ? 'On' : 'Off'}, Dark Mode: ${darkModeEnabled ? 'On' : 'Off'}'),
                );
                ScaffoldMessenger.of(context).showSnackBar(snackBar);
              },
              child: Text('Save'),
            ),
          ],
        ),
      ),
    );
  }
}

We use CheckboxListTile and SwitchListTile widgets because they combine the toggle control with a label, making the UI clear and accessible.

Each toggle updates its own boolean state variable inside setState() to refresh the UI.

The Save button shows a SnackBar that confirms the current toggle states, giving immediate feedback to the user.

Final Result

Completed Screen

Settings Toggle Screen

[✔] Enable Notifications
(ON) Dark Mode

[ Save ]

Tapping the checkbox toggles notifications on or off.

Tapping the switch toggles dark mode on or off.

Pressing Save shows a small message at the bottom confirming the current settings.

Stretch Goal

Add a reset button that sets both toggles back to off.

💡 Hint

Add another ElevatedButton labeled 'Reset' that sets notificationsEnabled and darkModeEnabled to false inside setState.