material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
360 stars 27 forks source link

how to use 'extended color' in flutter ? #304

Closed lien-dkseo closed 3 weeks ago

lien-dkseo commented 1 month ago
// theme.dart
class MaterialTheme {
  ...

  /// Custom Color 1
  static const customColor1 = ExtendedColor(
    seed: Color(4290465906),
    value: Color(4290465906),
    light: ColorFamily(
      color: Color(4287449693),
      onColor: Color(4294967295),
      colorContainer: Color(4294957537),
      onColorContainer: Color(4281992986),
    ),
    ...
  );

  /// Custom Color 2
  static const customColor2 = ExtendedColor(
    seed: Color(4286067527),
    value: Color(4286067527),
    light: ColorFamily(
      color: Color(4287449691),
      onColor: Color(4294967295),
      colorContainer: Color(4294957536),
      onColorContainer: Color(4281992985),
    ),
    ...
  );

  List<ExtendedColor> get extendedColors => [
    customColor1,
    customColor2,
    customColor3,
    ...
  ];
}

how to use 'static const customColor1, 2, ...' or 'get extendedColors' in flutter ?

bhargavweb commented 3 weeks ago

Here is how I would use it:

ThemeData darkMediumContrast() { // Update the other similar methods also
    return theme(darkMediumContrastScheme().toColorScheme(),
        divider: MaterialTheme.divider.darkMediumContrast);
  }

ThemeData theme(ColorScheme colorScheme, {required ColorFamily divider}) =>
      ThemeData(
          useMaterial3: true,
          brightness: colorScheme.brightness,
          colorScheme: colorScheme,
          textTheme: textTheme.apply(
            bodyColor: divider.color, // Example
            displayColor: divider.onColor, 
           )
       )
   );
lien-dkseo commented 3 weeks ago

@bhargavweb thank you~.

I edited the question. divider -> customColor1, customColor2, ...

I want to use it like this.... Theme.of(context).....customColor1.onColor Theme.of(context).....customColor1.colorContainer

Icon(
  Icons.warning_amber,
  color: Theme.of(context).colorScheme.primary, // like this... Theme.of(context).....customColor1.onColor
),
jwill commented 3 weeks ago

What you are describing sounds like Theme Extensions: https://api.flutter.dev/flutter/material/ThemeExtension-class.html

Which solution you choose can be determined by your needs (e.g. will the color be the same across light, dark, and contrast levels or need to be contrast aware)