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 #

Builder widget #

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 #

For ease of testing, a separate package provides test utilities to mock dynamic colors. This allows you to test your app's behavior with different dynamic colors without having to change the device's wallpaper or accent color.

flutter pub add --dev dynamic_color_testing

import 'package:dynamic_color_testing/dynamic_color_testing.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