dynamic_color

Description:

dynamic color

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
copied to clipboard
import 'package:dynamic_color/dynamic_color.dart';
copied to clipboard
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 ...;
}
),
copied to clipboard
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();
copied to clipboard
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
copied to clipboard
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,
);

// ...
});
copied to clipboard
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
copied to clipboard