Color schemes in Flutter - Mini App: Build & Ship

Build: Color Scheme Demo

This screen shows how to use light and dark color schemes in a Flutter app. It has a title, a colored box, and a button to switch between light and dark modes.

Target UI

-------------------------
| Color Scheme Demo      |
|-----------------------|
|                       |
|   [Colored Box]        |
|                       |
|   [Switch Theme Button]|
|                       |
-------------------------

Use ThemeData to define light and dark color schemes

Show a colored box that uses the primary color from the current theme

Add a button labeled 'Switch Theme' that toggles between light and dark modes

Update the app bar title color to match the theme's onPrimary color

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: _isDark ? ThemeMode.dark : ThemeMode.light,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Color Scheme Demo'),
          // TODO: Set title color to onPrimary from theme
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // TODO: Add a colored box using theme primary color
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _isDark = !_isDark;
                  });
                },
                child: const Text('Switch Theme'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Task 1

Task 2

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.light(
          primary: Colors.blue,
          onPrimary: Colors.white,
        ),
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.dark(
          primary: Colors.deepPurple,
          onPrimary: Colors.white,
        ),
      ),
      themeMode: _isDark ? ThemeMode.dark : ThemeMode.light,
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Color Scheme Demo',
            style: TextStyle(
              color: Theme.of(context).colorScheme.onPrimary,
            ),
          ),
          backgroundColor: Theme.of(context).colorScheme.primary,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 150,
                height: 150,
                color: Theme.of(context).colorScheme.primary,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _isDark = !_isDark;
                  });
                },
                child: const Text('Switch Theme'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This app uses ThemeData with ColorScheme.light and ColorScheme.dark to define colors for light and dark modes. The themeMode switches between them based on a boolean state.

The AppBar background uses the theme's primary color, and the title text color uses colorScheme.onPrimary to ensure good contrast.

The colored box in the center uses the primary color from the current theme, so it changes color when switching themes.

The button toggles the theme mode by updating the state, causing the UI to rebuild with the new colors.

Final Result

Completed Screen

-------------------------
| Color Scheme Demo      |
|-----------------------|
|                       |
|   [ Blue or Purple ]   |
|   [ Colored Box ]      |
|                       |
|   [Switch Theme Button]|
|                       |
-------------------------

Tapping 'Switch Theme' toggles between light (blue) and dark (purple) color schemes.

The colored box changes color to match the theme's primary color.

The app bar background and title text colors update accordingly.

Stretch Goal

Add smooth animation when switching between light and dark themes.

💡 Hint

Use AnimatedTheme widget or wrap MaterialApp with AnimatedBuilder to animate theme changes.