Introduction

Custom theming is essential when building polished Flutter apps that align with your brand identity. With Material 3 (also known as Material Design 3 or Material3), Flutter offers an extensible ColorScheme API, dynamic color support on Android 12+, and new color roles that simplify theming. In this tutorial, you’ll learn how to define a custom Material 3 color scheme, integrate it in your ThemeData, and adapt your app to light/dark modes. We’ll focus on code examples, best practices, and real-world considerations—no fluff.

Defining a Custom Material 3 ColorScheme

Material 3 introduces extended color roles beyond primary and accent. A complete ColorScheme includes:

• primary / onPrimary

• secondary / onSecondary

• tertiary / onTertiary

• error / onError

• background / onBackground

• surface / onSurface

To start, pick or generate tonal palettes (you can use the Material Theme Builder). Then create a scheme in Dart:

import 'package:flutter/material.dart';

final ColorScheme customLightScheme = ColorScheme(
  brightness: Brightness.light,
  primary: Color(0xFF6750A4),
  onPrimary: Colors.white,
  secondary: Color(0xFF625B71),
  onSecondary: Colors.white,
  tertiary: Color(0xFF7D5260),
  onTertiary: Colors.white,
  error: Color(0xFFB3261E),
  onError: Colors.white,
  background: Color(0xFFFFFBFE),
  onBackground: Color(0xFF1C1B1F),
  surface: Color(0xFFFFFBFE),
  onSurface: Color(0xFF1C1B1F),
);

You can mirror this for customDarkScheme by swapping colors and adjusting brightness.

Integrating the ColorScheme into ThemeData

Once you have your ColorScheme objects, plug them into ThemeData. With Flutter’s Material 3 support enabled, you simply set useMaterial3: true:

MaterialApp(
  theme: ThemeData(
    colorScheme: customLightScheme,
    useMaterial3: true,
    textTheme: Typography.material2021(platform: TargetPlatform.android)
        .white, // or .black for light mode
  ),
  darkTheme: ThemeData(
    colorScheme: customDarkScheme,
    useMaterial3: true,
    textTheme: Typography.material2021(platform: TargetPlatform.android)
        .white,
  ),
  themeMode: ThemeMode.system,
  home: const MyHomePage(),
);

Key tips:

• Always set useMaterial3: true to opt into Material3 defaults (e.g., updated component shapes).

• Provide both theme and darkTheme for seamless brightness switching.

• Consider defining a global TextTheme or custom typography to match brand fonts.

Leveraging Dynamic Color and Dark Mode

Material3 supports dynamic color on Android 12+. Use ColorScheme.fromSeed for quick generation or fetch dynamic palettes:

final ColorScheme dynamicScheme = await DynamicColorPlugin.getCorePalette()
    .then((palette) => ColorScheme.fromSwatch(
          primarySwatch: palette.primary.toMaterialColor(),
          brightness: Brightness.light,
        ));

Fallback to a seeded scheme if dynamic data is unavailable:

final seededScheme = ColorScheme.fromSeed(
  seedColor: const Color(0xFF6750A4),
  brightness: Brightness.light,
);

Then inject this into your MaterialApp. The app adapts automatically if the device’s wallpaper changes (Android 12+). Users get a more personalized feel without extra work.

Customizing Component Themes with ColorSchemeExtensions

Material 3 lets you extend the color scheme for your own components:

class CardColors extends ThemeExtension<CardColors> {
  final Color accentBorder;
  CardColors({required this.accentBorder});

  @override
  CardColors copyWith({Color? accentBorder}) =>
      CardColors(accentBorder: accentBorder ?? this.accentBorder);

  @override
  CardColors lerp(ThemeExtension<CardColors>? other, double t) {
    if (other is! CardColors) return this;
    return CardColors(
      accentBorder: Color.lerp(accentBorder, other.accentBorder, t)!,
    );
  }
}

// In ThemeData:
ThemeData(
  extensions: <ThemeExtension<dynamic>>[
    CardColors(accentBorder: customLightScheme.secondary),
  ],
)

Retrieve it in widgets:

final cardColors = Theme.of(context).extension<CardColors>()!;
Border.all(color: cardColors.accentBorder);

This approach keeps custom theming consistent with Material3 principles.

Vibe Studio

For accelerated development, check out Vibe Studio. Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

In this tutorial you learned how to craft a custom Material 3 color scheme, integrate it into your Flutter app, and leverage dynamic color with Android 12+ support. You also saw how to extend ThemeData for bespoke components, ensuring your design language remains coherent throughout. Now you’re set to build visually rich, on-brand Flutter applications with Material3. Happy coding!