Dark mode support in Flutter - Mini App: Build & Ship

Build: Dark Mode Demo

This screen shows a simple app that supports switching between light and dark modes using a toggle switch.

Target UI

┌─────────────────────────────┐
│ Dark Mode Demo              │
├─────────────────────────────┤
│                             │
│  Light Mode                 │
│                             │
│  [Toggle Dark Mode Switch]  │
│                             │
└─────────────────────────────┘

Use MaterialApp with theme and darkTheme properties

Add a toggle switch to switch between light and dark mode

Switching the toggle updates the app theme immediately

Show text indicating current mode: 'Light Mode' or 'Dark Mode'

Use StatefulWidget to manage theme state

Starter Code

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 _isDarkMode = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dark Mode Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: _isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Dark Mode Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                _isDarkMode ? 'Dark Mode' : 'Light Mode',
                style: const TextStyle(fontSize: 24),
              ),
              const SizedBox(height: 20),
              // TODO: Add a Switch widget here to toggle dark mode
            ],
          ),
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

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 _isDarkMode = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dark Mode Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: _isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Dark Mode Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                _isDarkMode ? 'Dark Mode' : 'Light Mode',
                style: const TextStyle(fontSize: 24),
              ),
              const SizedBox(height: 20),
              Switch(
                value: _isDarkMode,
                onChanged: (bool value) {
                  setState(() {
                    _isDarkMode = value;
                  });
                },
                activeColor: Theme.of(context).colorScheme.secondary,
                inactiveThumbColor: Colors.grey,
                inactiveTrackColor: Colors.grey.shade400,
                semanticLabel: 'Toggle dark mode',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This app uses a StatefulWidget to keep track of whether dark mode is on or off with the _isDarkMode boolean.

The MaterialApp has theme for light mode and darkTheme for dark mode. The themeMode property switches between them based on _isDarkMode.

Inside the screen, a Switch widget lets the user toggle dark mode. When toggled, it calls setState to update _isDarkMode, which rebuilds the app with the new theme.

The text above the switch updates to show "Light Mode" or "Dark Mode" so the user knows the current mode.

This approach follows Flutter's recommended way to support dark mode with easy switching.

Final Result

Completed Screen

┌─────────────────────────────┐
│ Dark Mode Demo              │
├─────────────────────────────┤
│                             │
│        Dark Mode            │
│                             │
│        [  Switch  ]         │
│                             │
└─────────────────────────────┘

User taps the switch to toggle dark mode on or off.

The background and text colors change immediately to match the selected mode.

The text label updates to show 'Dark Mode' or 'Light Mode' accordingly.

Stretch Goal

Add a system theme sync so the app automatically uses the device's dark or light mode by default.

💡 Hint

Use ThemeMode.system for themeMode property and remove manual toggle or keep toggle to override system setting.