dynamic_color

A Flutter package to create Material color schemes based on a platform's implementation of dynamic color. Currently supported platforms are:

Android S+: user wallpaper color
- For color schemes from content color, use ColorScheme.fromImageProvider
Linux: GTK+ theme's @theme_selected_bg_color
macOS: app accent color
Windows: accent color or window/glass color

This package also supports color and color scheme harmonization.

Getting started

flutter pub add dynamic_color

import 'package:dynamic_color/dynamic_color.dart';

Features

DynamicColorBuilder is a stateful widget that provides the device's dynamic colors in a light and dark ColorScheme.

DynamicColorBuilder(
  builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
    return ...;
  }
),

Plugin

Under the hood, DynamicColorBuilder uses a plugin to talk to the OS.

Color and color scheme harmonization

Harmonization makes adding and introducing new colors to your app more seamless by automatically shifting hue and chroma slightly so that a product's colors feel more cohesive with user colors.

This package provides two extension methods to accomplish this:

Color color = Colors.red;
// Shift's [color]'s hue towards the (dynamic) color scheme's primary color. This leaves the color recognizable while harmonizing it with a user's dynamic color.
harmonizedColor = color.harmonizeWith(colorScheme.primary);

// Does the same thing, for ColorScheme built-in semantic colors
harmonizedColorScheme = colorScheme.harmonized();

See harmonization.dart for details. Learn more about custom colors and harmonization on the Material 3 site.

Examples

See example/lib/complete_example.dart for obtaining dynamic colors, creating harmonized color schemes, and harmonizing custom colors.

See example/lib/accent_color.dart for obtaining the accent color on desktop.

All examples are part of this example app (source). To run the example app:

cd example
flutter run

Testing

import 'package:dynamic_color/test_utils.dart';
import 'package:dynamic_color/samples.dart';

void main() {
  // Reset for every test
  setUp(() => DynamicColorTestingUtils.setMockDynamicColors());

  testWidgets('Verify dynamic core palette is used ',
      (WidgetTester tester) async {
    DynamicColorTestingUtils.setMockDynamicColors(
      corePalette: SampleCorePalettes.green,
    );

    // ...
});

See example/test/widget_test.dart for an example.

Development

The example app is hosted via GitHub pages. To update it:

cd example
flutter build web