How the front text color decided?

[wyxcoder]

On demo page like https://rydmike.com/flexcolorscheme4/#/
The first line, Primary, Primary Color, Primary ColorDark etc. Those colors are the color of the background rectangle. How where decides the front text color on those boxes? Some are white, some are black.

Thanks

[rydmike]

Hi @wyxcode,

If you look in the shared code for the examples that show the theme color boxes and the text on them:

https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/shared/show_theme_colors.dart

You can see that it actually uses 3 different strategies to do this.

Let's start with the lowest level that they ultimately all are based on:

textColor: ThemeData.estimateBrightnessForColor(color) == Brightness.dark ? Colors.white  : Colors.black,

The static function estimateBrightnessForColor(color) in the Flutter SDK's ThemeData class returns the enum value Brightness.dark if the passed in color is one that is considered dark, which means a light text color, typically white, will look best on it. It returns Brightness.light if the passed in color is light and works best with dark text, typically black.

Whenever you have a surface or box of a color (pre-defined, random, computed, from a theme), you can use this function to calculate the most suitable color to draw and write things on it for maximum contrast.

Here is an example of that:

flex_color_scheme/example/lib/shared/show_theme_colors.dart

Line 38 in 9796f27

ThemeCard(

The Flutter SDK ThemeData contains some theme color values that are pre-computed from its surface theme colors, primary and secondary colors, and then contains the correct pre-assigned color value for the corresponding theme color in question.

The Flutter color theming class ColorScheme names these colors "on" colors, so there is eg onPrimary, onSecondary, onSurface, onBackground, onError that some of Flutter's own theming methods pre-assigned correct computed values to, depending on what colors are assigned to primary, secondary, surface, background and error color.

FlexColorScheme does the same, depending on selected scheme, or what colors you assigned to primary, secondary etc, it automatically computes the onColor for them and asisgned them to the colorScheme in ThemeData and many other color properties where they belong. So you don't have to. You can also override and manually assign the onColors yourself in FlexColorScheme. This can be useful if you maybe want a bit opacity or hint of a color in it, and not just plain white. The blending of a hint of primary color into surface and background colors and varying strengths is also a thing that FlexColorScheme can do automatically to create more nuanced or branded themes.

You can the refer to this line to see on example of using theme based pre-assigned onColor for the text color:

flex_color_scheme/example/lib/shared/show_theme_colors.dart

Line 74 in 9796f27

ThemeCard(

Then the 3rd way is that there is also a primary text theme in Flutter, this text theme always has a color that fits well on the primaryColor of the current theme, instead of the plain textTheme, that is designed to fit on active surface/background color.

Here you can see an example of that being used:

flex_color_scheme/example/lib/shared/show_theme_colors.dart

Line 33 in 9796f27

ThemeCard(

Many theme colors in Flutter do not come with pre-computed "onColors" that you can rely to get the correct text color for it.

For example the ColorScheme colors primaryVariant and secondaryVariant do not have any onPrimaryVariant and onSecondaryVariant colors. And since you can define the variant colors to be of different brightness than their non variant version, there is no guarantee that onPrimary color will be correct for primaryVariant, even if it is correct for primary color. Same things applies to secondary, seconaryVariant and onSecondary color.

So for cases like that you will have to rely on the estimateBrightnessForColor(color) to compute the correct color. It is of course more efficient if you can just get the value from a color already stored with the theme instead of always computing it.

FlexColorScheme's predefined themes always uses primary and primaryVariant that are close enough in brightness that the onPrimary works well enough for both of them. Same applied to secondary and secondaryVariant colors in it pre-defined themes regarding onSecondary color.

Hope this helps!

br Mike

[wyxcoder]

Woo, great! thank you very much. there are a lot of information in the reply, very helpful!