FlexColorScheme in Flutter: The Smarter Way to Theme Your Apps

Designing a consistent and beautiful theme for your Flutter app can be tricky. While the built-in ThemeData is powerful, it often requires a lot of boilerplate code to achieve polished results—especially if you want your app to look great in both light and dark modes.

That’s where FlexColorScheme comes in.

What is FlexColorScheme?

FlexColorScheme is a Flutter package that makes it easy to create and manage themes for your app. It builds on top of Flutter’s theming system (ThemeData and ColorScheme) but adds:

• Predefined color schemes: Over 50 ready-made themes inspired by real-world apps.
• Light & dark variants: Auto-generate matching dark mode versions.
• Flexible customization: Adjust tones, surface colors, and component styles with ease.
• Material 3 ready: Supports Material You dynamic color features out of the box.

Instead of writing hundreds of lines of ThemeData, you can define your whole theme in just a few lines.

Why Use FlexColorScheme?

• Save Time Stop manually tweaking every widget’s color—FlexColorScheme does the heavy lifting.
• Consistency Light and dark modes stay perfectly in sync.
• Material 3 Support Your app can adopt system-wide dynamic colors on Android 12+.
• Customizable Yet Simple You can start with presets, then fine-tune them.

Getting Started

Add it to your pubspec.yaml:

dependencies:
  flex_color_scheme: ^8.3.0

Import it:

import 'package:flex_color_scheme/flex_color_scheme.dart';

Example: Quick Theming

Here’s how you can set up light and dark themes in just a few lines:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: FlexThemeData.light(scheme: FlexScheme.mango),
      darkTheme: FlexThemeData.dark(scheme: FlexScheme.mango),
      themeMode: ThemeMode.system, // Switches based on device setting
      home: MyHomePage(),
    );
  }
}

That’s it—you now have a fully styled app with both light and dark themes.

Example: Custom Color Scheme

If you want more control, you can create your own custom scheme:

final myScheme = FlexSchemeData(
  name: 'My Custom Theme',
  description: 'A blue and orange color scheme',
  light: FlexSchemeColor.from(
    primary: Colors.blue,
    secondary: Colors.orange,
  ),
  dark: FlexSchemeColor.from(
    primary: Colors.blue.shade200,
    secondary: Colors.orange.shade200,
  ),
);

Then apply it:

theme: FlexThemeData.light(colors: myScheme.light),
darkTheme: FlexThemeData.dark(colors: myScheme.dark),

Bonus: Material 3 Dynamic Colors

If you want your app to match the system theme on Android 12+:

theme: FlexThemeData.light(useMaterial3: true, useMaterial3ErrorColors: true),
darkTheme: FlexThemeData.dark(useMaterial3: true, useMaterial3ErrorColors: true),

Your app will automatically adapt to the user’s wallpaper colors.

Best Practices

• Start with presets: Use a predefined scheme to get going quickly.
• Override selectively: Only customize colors you need to change.
• Test in dark mode: Ensure both light and dark look great together.
• Use Material 3: Future-proof your app with dynamic color support.