Color schemes in Flutter

Introduction

Color schemes help you pick colors that look good together in your app. They make your app easy to see and nice to use.

When you want your app to have a consistent look and feel.

When you need to support light and dark modes in your app.

When you want to make sure text and buttons are easy to read.

When you want to quickly change the app colors without changing every widget.

When you want to follow design rules that make your app look professional.

Syntax

Flutter

final ColorScheme myColors = ColorScheme.light(
  primary: Colors.blue,
  onPrimary: Colors.white,
  secondary: Colors.green,
  onSecondary: Colors.white,
  error: Colors.red,
  onError: Colors.white,
  background: Colors.grey.shade100,
  onBackground: Colors.black,
  surface: Colors.white,
  onSurface: Colors.black,
  brightness: Brightness.light,
);

ColorScheme groups colors for your app in one place.

Use brightness to set light or dark mode colors.

Examples

This creates a simple light color scheme with blue and orange colors.

Flutter

final ColorScheme lightScheme = ColorScheme.light(
  primary: Colors.blue,
  secondary: Colors.orange,
);

This creates a dark color scheme with deep purple and teal colors.

Flutter

final ColorScheme darkScheme = ColorScheme.dark(
  primary: Colors.deepPurple,
  secondary: Colors.teal,
);

Use a color scheme inside your app theme to apply colors globally.

Flutter

ThemeData(
  colorScheme: ColorScheme.light(
    primary: Colors.pink,
    secondary: Colors.amber,
  ),
)

Sample App

This app uses a light color scheme with blue as the main color and orange as the accent. The button uses these colors automatically.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final ColorScheme myScheme = ColorScheme.light(
      primary: Colors.blue,
      secondary: Colors.orange,
    );

    return MaterialApp(
      title: 'Color Scheme Demo',
      theme: ThemeData(
        colorScheme: myScheme,
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Color Scheme Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {},
            child: const Text('Press Me'),
          ),
        ),
      ),
    );
  }
}

Important Notes

Use ColorScheme.light() or ColorScheme.dark() to start with default colors.

Always test your colors for good contrast to keep text readable.

You can access colors in widgets using Theme.of(context).colorScheme.primary and similar.

Summary

Color schemes group app colors for easy use and consistency.

Use light or dark schemes to support different modes.

Apply color schemes in your app theme to style widgets automatically.

Practice

1. What is the main purpose of using a ColorScheme in a Flutter app?

easy

A. To create animations for color changes

B. To group related colors for consistent app styling

C. To load images with color filters

D. To define font styles for text widgets

Solution

1. Step 1: Understand ColorScheme role

   A ColorScheme groups colors like primary, secondary, background for consistent use.

2. Step 2: Identify purpose in app design

   This grouping helps keep colors uniform across the app's widgets and themes.

3. Final Answer:

   To group related colors for consistent app styling -> Option B

4. Quick Check:

   ColorScheme = Group colors [OK]

Hint: ColorScheme groups colors for consistent app look [OK]

Common Mistakes:

• Confusing ColorScheme with animations
• Thinking it controls fonts or images
• Using ColorScheme only for backgrounds

2. Which of the following is the correct way to create a light color scheme in Flutter?

easy

A. ThemeData.light(primaryColor: Colors.blue)

B. ColorScheme.dark(primary: Colors.blue)

C. ColorScheme.light(primary: Colors.blue)

D. ThemeData.dark(primaryColor: Colors.blue)

Solution

1. Step 1: Identify light scheme constructor

   Flutter provides ColorScheme.light() to create a light color scheme.

2. Step 2: Check usage with primary color

   Passing primary: Colors.blue sets the main color in the scheme.

3. Final Answer:

   ColorScheme.light(primary: Colors.blue) -> Option C

4. Quick Check:

   Light scheme uses ColorScheme.light() [OK]

Hint: Use ColorScheme.light() for light mode colors [OK]

Common Mistakes:

• Using ColorScheme.dark() for light mode
• Confusing ThemeData with ColorScheme
• Passing colors to wrong constructors

3. Given this code snippet, what color will the FloatingActionButton use for its background?

final scheme = ColorScheme.dark(primary: Colors.red);
return FloatingActionButton(
  backgroundColor: scheme.primary,
  onPressed: () {},
  child: Icon(Icons.add),
);

medium

A. Blue

B. Green

C. Default grey

D. Red

Solution

1. Step 1: Analyze ColorScheme.dark usage

   The scheme is dark with primary: Colors.red, so primary color is red.

2. Step 2: Check FloatingActionButton background

   The button's backgroundColor is set to scheme.primary, which is red.

3. Final Answer:

   Red -> Option D

4. Quick Check:

   scheme.primary = red [OK]

Hint: backgroundColor uses scheme.primary color [OK]

Common Mistakes:

• Assuming default color instead of scheme.primary
• Confusing dark scheme colors with light scheme
• Ignoring the assigned primary color

4. What is wrong with this code snippet that tries to create a dark color scheme?

final scheme = ColorScheme.dark(primaryColor: Colors.green);

medium

A. The property should be named 'primary' not 'primaryColor'

B. ColorScheme.dark() does not accept any parameters

C. Colors.green is not allowed in dark schemes

D. Missing import for Colors

Solution

1. Step 1: Check ColorScheme.dark parameters

   The correct property name is primary, not primaryColor.

2. Step 2: Understand parameter naming

   Using primaryColor causes a syntax error because it is not recognized.

3. Final Answer:

   The property should be named 'primary' not 'primaryColor' -> Option A

4. Quick Check:

   Use 'primary' property in ColorScheme [OK]

Hint: Use 'primary' property, not 'primaryColor' in ColorScheme [OK]

Common Mistakes:

• Using 'primaryColor' instead of 'primary'
• Thinking ColorScheme.dark() takes no parameters
• Assuming Colors.green is invalid in dark mode

5. You want to create a custom color scheme that changes the background color based on light or dark mode. Which approach correctly applies this in Flutter?

hard

A. Use ThemeData.from(colorScheme: ColorScheme.light()) for light mode and ThemeData.from(colorScheme: ColorScheme.dark()) for dark mode, switching based on brightness.

B. Manually set background colors in every widget without using ColorScheme.

C. Use only ColorScheme.light() and ignore dark mode.

D. Set background color directly in Scaffold without using themes.

Solution

1. Step 1: Understand theme switching

   Flutter apps switch themes by detecting brightness (light or dark mode).

2. Step 2: Use ThemeData.from with ColorScheme

   Using ThemeData.from(colorScheme: ...) applies the color scheme properly for each mode.

3. Step 3: Avoid manual color setting

   Manual color setting is error-prone and inconsistent compared to using themes.

4. Final Answer:

   Use ThemeData.from(colorScheme: ColorScheme.light()) for light mode and ThemeData.from(colorScheme: ColorScheme.dark()) for dark mode, switching based on brightness. -> Option A

5. Quick Check:

   ThemeData.from + ColorScheme = correct approach [OK]

Hint: Use ThemeData.from with ColorScheme for mode-based colors [OK]

Common Mistakes:

• Setting colors manually in widgets
• Ignoring dark mode color schemes
• Not using ThemeData.from for color schemes