How to use custom surface blend color?

[davidmartos96]

Hello! I was wondering how one could use a custom blend coloring with the FlexSchemeSurfaceColors.blend factory. I wasn't able to find usages of that constructor.

Thanks!

[rydmike]

Hi @davidmartos96,

Thanks for your question.

Are you wondering how to use surface blends with FlexColorsScheme, or how you could utilize FlexSchemeSurfaceColors.blend outside of FlexColorScheme?

In FlexColorScheme

If about FlexColorScheme, then it uses it internally automatically, You don't have to use FlexSchemeSurfaceColors.blend directly. It is used when you select surface blend mode with surfaceMode (a FlexSurfaceMode enum) and set blend level blendLevel to the desired level, with the light add dark FlexColorSchemefactories, or with the FlexThemeData light and dark extensions.

To see how to just use it with FlexColorScheme, it is shown in the example/tutorial, eg here:
https://pub.dev/packages/flex_color_scheme#example-4---all-themes

If you used the Themes Playground app https://rydmike.com/flexcolorschemeV4Tut5, and vary the surface mode and look at the code it generates, before and after changes of them, you cans see how to use it too.

theme: FlexThemeData.light(
  scheme: FlexScheme.blumineBlue,
  surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
  blendLevel: 20,
),
darkTheme: FlexThemeData.dark(
  scheme: FlexScheme.blumineBlue,
  surfaceMode: FlexSurfaceMode.highScaffoldLevelSurface,
  blendLevel: 15,
),

---

If you are a bit daring and want to try the development version of FlexColorScheme version 5*
https://pub.dev/packages/flex_color_scheme/versions/5.0.0-dev.2

It has an even fancier WEB app where you can see API code side by side (if your WEB desktop screen is wide enough) as you modify settings and you can more easily copy the code at any point:
https://rydmike.com/flexcolorscheme/themesplayground-v5

The API for most things are unchanged from version 4 to version 5, there are just many more things in version5.
The surface mode and blend level are however totally unchanged, so for seeing what it does in action, then trying it on the new app is pretty nice.

Version 5 is ready for release and stable now, but documentation is not done yet and I won't release it as stable before it is.

Outside FlexColorScheme

You can if you want to use it to make blends for other purposes and custom themes, not even using FlexColorScheme, then this is possible too. I suspect that is not what you were asking for, but if it was then the API docs for it will help:
https://pub.dev/documentation/flex_color_scheme/latest/flex_color_scheme/FlexSchemeSurfaceColors/FlexSchemeSurfaceColors.blend.html

[davidmartos96]

What I was wondering is if it was possible to blend with a custom color different from the primary color, inside the Flex Color theme

[rydmike]

No, not currently, but you can of course use whatever color as your primary color.

It would of course not be so difficult to provide a separate configurable custom blend color. The challenge is more to use it in a nice way. It is a bit tricky to produce results that automatically looks pretty and nice, if the blend color is very different from the primary "main" color of the app. As long as it is some close hue to it, it may work pretty well though and could provide options for even more varied styles and designs.

I might try the idea in a future version, experiment with it first and see how it works visually.

[davidmartos96]

No, not currently, but you can of course use whatever color as your primary color.

It would of course not be so difficult to provide a separate configurable custom blend color. The challenge is more to use it in a nice way. It is a bit tricky to produce results that automatically looks pretty and nice, if the blend color is very different from the primary "main" color of the app. As long as it is some close hue to it, it may work pretty well though and could provide options for even more varied styles and designs.

I might try the idea in a future version, experiment with it first and see how it works visually.

Great, thanks for the answers!

[rydmike]

@davidmartos96 for your info, with the release of FlexColorScheme version 5.1.0 I have added support for custom surface blend color. It uses the M3 ColorScheme.surfaceTint color as blend color as well. There is also support in the ThemesPlayground to customize it.

[davidmartos96]

Great to hear that! Thanks Mike! 😄

[rydmike]

In version 6, when you use custom blending and "tinted" TextTheme, the slight tint color for the text theme is also based on the custom tint color instead of primary color, which makes the tinted text theme fit with custom tinted surfaces as well.

Version 6 of the Themes Playground app also uses custom widgets that uses colorScheme.tint instead of primary for its tinting, so they now also adjust and fit when you use custom tint color. This was only a an adjustment to keep the Themes Playground app itself looking as nice as possible when using custom blend/tint color.

[rydmike]

In upcoming version 6.2, the custom surfaceTint color is also use for providing the tint base to the tonal palettes neutral and neutralVariant when using the Material 3 seed generated ColorScheme. Basically the custom tint color is also used as key color for these palettes instead of the primary color key color. The neutral tonal palettes are used for picking all the different tinted "neutral" surface and background colors in a seed generated colorscheme.

Flutter SDK and M3 only supports using the primary key color for neutral tonal palettes, it is hard coded, but via an update to FlexSeedScheme, that will also be released with after next Flutter version, this can be supported in FCS too (https://pub.dev/packages/flex_seed_scheme/versions/1.2.0-dev.1.)

Why add support for this?

It removes all color clashes between mixing and using, FCS blend based surface tint with custom tint and seed generated color schemes, as well as M3 elevation tint for elevated surfaces. Since they always all then share the same custom base color.

This makes custom tint work quite well, of course tinted backgrounds and elevations that color wise totally clash with otherwise overall theme is not a good idea, but it does increase possibilities and flexibility a lot. In my tests I did find that a lot colors do work quite well to set a different mood for the app. In an app that customizes colors, one could potentially use this global tinting color as a mood "setter".

To avoid a selected "mood" color to clash too much with primary color, one possibility is to pass the input color via MaterialColorUtilites and harmonize it against the active scheme's primary color.