[Question] How to use custom blending

[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!