fromImageProvider static method

Future<ColorScheme> fromImageProvider(
  1. {required ImageProvider<Object> provider,
  2. Brightness brightness = Brightness.light,
  3. Color? primary,
  4. Color? onPrimary,
  5. Color? primaryContainer,
  6. Color? onPrimaryContainer,
  7. Color? secondary,
  8. Color? onSecondary,
  9. Color? secondaryContainer,
  10. Color? onSecondaryContainer,
  11. Color? tertiary,
  12. Color? onTertiary,
  13. Color? tertiaryContainer,
  14. Color? onTertiaryContainer,
  15. Color? error,
  16. Color? onError,
  17. Color? errorContainer,
  18. Color? onErrorContainer,
  19. Color? outline,
  20. Color? outlineVariant,
  21. Color? background,
  22. Color? onBackground,
  23. Color? surface,
  24. Color? onSurface,
  25. Color? surfaceVariant,
  26. Color? onSurfaceVariant,
  27. Color? inverseSurface,
  28. Color? onInverseSurface,
  29. Color? inversePrimary,
  30. Color? shadow,
  31. Color? scrim,
  32. 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.

This sample shows how to use ColorScheme.fromImageProvider to create content-based dynamic color schemes.
link

To create a local project with this code sample, run:
flutter create --sample=material.ColorScheme.fromImageProvider.1 mysample

See also:

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,
  );
}