fromImageProvider static method
- {required ImageProvider<
Object> provider, - Brightness brightness = Brightness.light,
- Color? primary,
- Color? onPrimary,
- Color? primaryContainer,
- Color? onPrimaryContainer,
- Color? secondary,
- Color? onSecondary,
- Color? secondaryContainer,
- Color? onSecondaryContainer,
- Color? tertiary,
- Color? onTertiary,
- Color? tertiaryContainer,
- Color? onTertiaryContainer,
- Color? error,
- Color? onError,
- Color? errorContainer,
- Color? onErrorContainer,
- Color? outline,
- Color? outlineVariant,
- Color? background,
- Color? onBackground,
- Color? surface,
- Color? onSurface,
- Color? surfaceVariant,
- Color? onSurfaceVariant,
- Color? inverseSurface,
- Color? onInverseSurface,
- Color? inversePrimary,
- Color? shadow,
- Color? scrim,
- Color? surfaceTint}
Generate a ColorScheme
derived from the given imageProvider
.
Material Color Utilities extracts the dominant color from the
supplied ImageProvider. Using this color, a ColorScheme
is generated
with harmnonious colors that meet contrast requirements for accessibility.
If any of the optional color parameters are non-null, they will be
used in place of the generated colors for that field in the resulting
ColorScheme
. This allows apps to override specific colors for their
needs.
Given the nature of the algorithm, the most dominant color of the
imageProvider
may not wind up as one of the ColorScheme
colors.
The provided image will be scaled down to a maximum size of 112x112 pixels during color extraction.
To create a local project with this code sample, run:
flutter create --sample=material.ColorScheme.fromImageProvider.1 mysample
See also:
- M3 Guidelines: Dynamic color from content
- pub.dev/packages/dynamic_color, a package to create
ColorScheme
s based on a platform's implementation of dynamic color. - m3.material.io/styles/color/the-color-system/color-roles, the Material 3 Color system specification.
- pub.dev/packages/material_color_utilities, the package
used to algorightmically determine the dominant color and to generate
the
ColorScheme
.
Implementation
static Future<ColorScheme> fromImageProvider({
required ImageProvider provider,
Brightness brightness = Brightness.light,
Color? primary,
Color? onPrimary,
Color? primaryContainer,
Color? onPrimaryContainer,
Color? secondary,
Color? onSecondary,
Color? secondaryContainer,
Color? onSecondaryContainer,
Color? tertiary,
Color? onTertiary,
Color? tertiaryContainer,
Color? onTertiaryContainer,
Color? error,
Color? onError,
Color? errorContainer,
Color? onErrorContainer,
Color? outline,
Color? outlineVariant,
Color? background,
Color? onBackground,
Color? surface,
Color? onSurface,
Color? surfaceVariant,
Color? onSurfaceVariant,
Color? inverseSurface,
Color? onInverseSurface,
Color? inversePrimary,
Color? shadow,
Color? scrim,
Color? surfaceTint,
}) async {
// Extract dominant colors from image.
final QuantizerResult quantizerResult =
await _extractColorsFromImageProvider(provider);
final Map<int, int> colorToCount = quantizerResult.colorToCount.map(
(int key, int value) => MapEntry<int, int>(_getArgbFromAbgr(key), value),
);
// Score colors for color scheme suitability.
final List<int> scoredResults = Score.score(colorToCount, desired: 1);
final ui.Color baseColor = Color(scoredResults.first);
final Scheme scheme;
switch (brightness) {
case Brightness.light:
scheme = Scheme.light(baseColor.value);
case Brightness.dark:
scheme = Scheme.dark(baseColor.value);
}
return ColorScheme(primary: primary ?? Color(scheme.primary),
onPrimary: onPrimary ?? Color(scheme.onPrimary),
primaryContainer: primaryContainer ?? Color(scheme.primaryContainer),
onPrimaryContainer: onPrimaryContainer ?? Color(scheme.onPrimaryContainer),
secondary: secondary ?? Color(scheme.secondary),
onSecondary: onSecondary ?? Color(scheme.onSecondary),
secondaryContainer: secondaryContainer ?? Color(scheme.secondaryContainer),
onSecondaryContainer: onSecondaryContainer ?? Color(scheme.onSecondaryContainer),
tertiary: tertiary ?? Color(scheme.tertiary),
onTertiary: onTertiary ?? Color(scheme.onTertiary),
tertiaryContainer: tertiaryContainer ?? Color(scheme.tertiaryContainer),
onTertiaryContainer: onTertiaryContainer ?? Color(scheme.onTertiaryContainer),
error: error ?? Color(scheme.error),
onError: onError ?? Color(scheme.onError),
errorContainer: errorContainer ?? Color(scheme.errorContainer),
onErrorContainer: onErrorContainer ?? Color(scheme.onErrorContainer),
outline: outline ?? Color(scheme.outline),
outlineVariant: outlineVariant ?? Color(scheme.outlineVariant),
background: background ?? Color(scheme.background),
onBackground: onBackground ?? Color(scheme.onBackground),
surface: surface ?? Color(scheme.surface),
onSurface: onSurface ?? Color(scheme.onSurface),
surfaceVariant: surfaceVariant ?? Color(scheme.surfaceVariant),
onSurfaceVariant: onSurfaceVariant ?? Color(scheme.onSurfaceVariant),
inverseSurface: inverseSurface ?? Color(scheme.inverseSurface),
onInverseSurface: onInverseSurface ?? Color(scheme.inverseOnSurface),
inversePrimary: inversePrimary ?? Color(scheme.inversePrimary),
shadow: shadow ?? Color(scheme.shadow),
scrim: scrim ?? Color(scheme.scrim),
surfaceTint: surfaceTint ?? Color(scheme.primary),
brightness: brightness,
);
}