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.