Add API to create m3 color scheme from dynamic colors

[guidezpl]

Now that flutter/flutter#93427 has landed

[roman-petrov]

There is an unofficial dynamic_colorscheme package for this, but it has pretty rough implatemtation:

import 'package:flutter/material.dart';
import 'package:material_color_utilities/material_color_utilities.dart';

abstract class DynamicColorScheme {
  /// this method is to be used inside [DynamicColorBuilder] from the official Material package, dynamic_color.
  /// explanation is in example.
  static ColorScheme generate(CorePalette palette, {bool? dark}) {
    final result = _generateM3Scheme(palette, dark ?? false);
    return result;
  }
}

ColorScheme _generateM3Scheme(CorePalette palette, bool dark) {
  /// refer to https://m3.material.io/styles/color/the-color-system/tokens for detailed explanation
  /// lines commented out are colors defined in the link above, but undefined in [ColorScheme].
  /// tertiary and inverse colors also ignored due to the same reason.

  final bool d = dark;

  final primaries = palette.primary;
  final secondaries = palette.secondary;
  final neutrals = palette.neutral;

  final Color primary = Color(primaries.get(d ? 80 : 40));
  final Color primaryContainer = Color(primaries.get(d ? 30 : 90));
  final Color secondary = Color(secondaries.get(d ? 80 : 40));
  final Color secondaryContainer = Color(secondaries.get(d ? 30 : 90));
  final Color error = Color(palette.error.get(d ? 80 : 40));
  // final Color errorContainer = Color(palette.error.get(d ? 30 : 90));

  final Color background = Color(neutrals.get(d ? 10 : 99));
  final Color surface = background;

  final Color onPrimary = Color(primaries.get(d ? 20 : 100));
  final Color onSecondary = Color(secondaries.get(d ? 20 : 100));
  // final Color onPrimaryContainer = Color(primaries.get(d ? 90 : 10));
  // final Color onSecondaryContainer = Color(secondaries.get(d ? 90 : 10));
  final Color onError = Color(palette.error.get(d ? 20 : 100));
  // final Color onErrorContainer = Color(palette.error.get(d ? 80 : 10));

  final Color onBackground = Color(neutrals.get(d ? 90 : 10));
  final Color onSurface = onBackground;

  final ColorScheme result = ColorScheme(
      primary: primary,
      primaryVariant: primaryContainer,
      secondary: secondary,
      secondaryVariant: secondaryContainer,
      surface: surface,
      background: background,
      error: error,
      onPrimary: onPrimary,
      onSecondary: onSecondary,
      onSurface: onSurface,
      onBackground: onBackground,
      onError: onError,
      brightness: d ? Brightness.dark : Brightness.light);

  return result;
}

It would be great to have an official and correct implementation to use with Flutter.

[guidezpl]

Agreed! I should get around to this this quarter, though contributions are always welcome :)

[roman-petrov]

I did some further research and now see that just 6 days ago required functionality was commited into material_color_utilities package.

So as I understand, there is almost nothing to do here to resolve this issue and we should just wait for material_color_utilities new release.

[roman-petrov]

I just tried to temporarily copy-paste material_color_utilities mapping code into my project until it is not published and still had to write some trivial helper code which constructs ColorScheme instance from Scheme instance like this:

ColorScheme createColorScheme(Scheme scheme, Brightness brightness) =>
    ColorScheme(
      brightness: brightness,
      primary: Color(scheme.primary),
      onPrimary: Color(scheme.onPrimary),
      primaryContainer: Color(scheme.primaryContainer),
      onPrimaryContainer: Color(scheme.onPrimaryContainer),
      secondary: Color(scheme.secondary),
      onSecondary: Color(scheme.onSecondary),
      secondaryContainer: Color(scheme.secondaryContainer),
      onSecondaryContainer: Color(scheme.onSecondaryContainer),
      tertiary: Color(scheme.tertiary),
      onTertiary: Color(scheme.onTertiary),
      tertiaryContainer: Color(scheme.tertiaryContainer),
      onTertiaryContainer: Color(scheme.onTertiaryContainer),
      error: Color(scheme.error),
      onError: Color(scheme.onError),
      errorContainer: Color(scheme.errorContainer),
      onErrorContainer: Color(scheme.onErrorContainer),
      background: Color(scheme.background),
      onBackground: Color(scheme.onBackground),
      surface: Color(scheme.surface),
      onSurface: Color(scheme.onSurface),
      surfaceVariant: Color(scheme.surfaceVariant),
      onSurfaceVariant: Color(scheme.onSurfaceVariant),
      outline: Color(scheme.outline),
      shadow: Color(scheme.shadow),
      inverseSurface: Color(scheme.inverseSurface),
      onInverseSurface: Color(scheme.inverseOnSurface),
      inversePrimary: Color(scheme.inversePrimary),
    );

I am not sure where such code should live, but I think this is the last step required to construct Flutter ColorScheme from CorePalette...

[guidezpl]

This is a side-effect of this library having intentionally no dependencies. Maybe we should provide a simple Scheme → ColorScheme function like the one above in the material library @darrenaustin WDYT?

Can publish the next version after this

[darrenaustin]

The main problem I see with this is that we would be exposing Scheme in the public Flutter API. It might be confusing to have ColorScheme, and also Scheme that essentially do the same thing. Scheme also seems like a very generic term that doesn't necessarily denote something to do with colors.

That said, is there another API for dynamic color generation in material_color_utilities that we could wrap? Similar to the fromSeed methods we added earlier?

[guidezpl]

We could do this with an extension method Scheme.toColorScheme, which I don't think exposes Scheme.

That said, is there another API for dynamic color generation in material_color_utilities that we could wrap? Similar to the fromSeed methods we added earlier?

Alternatively, I made lightFromCorePalette and darkFromCorePalette available so this would be possible. Something like:

ColorScheme.fromCorePalette(CorePalette palette, Brightness brightness) => brightness == Brightness.light ? lightFromCorePalette(palette) : darkFromCorePalette(palette);

[roman-petrov]

Just FYI, not closely related to this topic, but: I found that variable names in Scheme and ColorScheme are almost identical, except

ColorScheme.onInverseSurface and Scheme.inverseOnSurface

Not sure what should be correct name according to Material spec and not sure where to post this issue and if it is important.

[guidezpl]

Yeah, I thought the spec should change to onInverseSurface (because it's the color that appears on the inverseSurface color but it was decided not to, hence the difference.