FlexSchemeSurfaceColors.from constructor
- Brightness brightness = Brightness.light,
- FlexSurface surfaceStyle = FlexSurface.material,
- Color? primary,
Returns the surface colors for given brightness
and surfaceStyle
values.
The FlexSurface enum is used to represent surface color schemes. FlexSurface.material is the surface colors scheme presented in Material design guide here for light theme: https://material.io/design/color/the-color-system.html#color-theme-creation and here for dark theme under "The dark theme baseline palette": https://material.io/design/color/dark-theme.html#ui-application
The FlexSurface.light, FlexSurface.medium, FlexSurface.strong
and FlexSurface.heavy blends in an increasing amount of the provided
primary
color into the surface, background and scaffold background
colors, for a primary color branded look on these background colors.
The primary
color is not used for for Material or custom surface style.
If primary
is not provided it defaults to
FlexColor.materialLightPrimary if brightness is light, and
otherwise defaults to FlexColor.materialDarkPrimary. When creating
surface colors that fits a given scheme, the scheme's primary color
should be passed to primary
.
The percentage of blend values for each strength are separate for surface, background and scaffoldBackground. Scaffold background only gets a slight blend in heavy mode. Surface receives a lower percentage blend than background. The blend values are also different for light and dark themes, as light themes require less of the typically more saturated primary color. Dark themes must use a slightly de-saturated primary color, so the blend percentage values for dark surfaces must be higher.
This kind of surface branding is based on the Material guide found under "Accessibility and contrast" https://material.io/design/color/dark-theme.html#properties for branded surfaces.
The brightness
controls if we create surface colors for light or
dark surfaces.
The surface colors returned by this factory can also be used to make branded surface colors for Flutter's standard ColorScheme, it does not have to be used exclusively by FlexColorScheme.
Implementation
factory FlexSchemeSurfaceColors.from({
/// Controls if we create surface colors for light or dark surfaces.
Brightness brightness = Brightness.light,
/// The style of the used surfaces colors.
FlexSurface surfaceStyle = FlexSurface.material,
/// Primary color to blend into surface colors when ThemeSurface light,
/// medium, strong and heavy are used. Is not used for and not required
/// for Material or custom surface style.
///
/// Defaults to [FlexColor.materialLightPrimary] if brightness is light,
/// otherwise defaults to [FlexColor.materialDarkPrimary].
Color? primary,
}) {
// Primary color gets default via brightness and Material default colors
// if it was not provided, should be provided when making branded surfaces.
primary ??= brightness == Brightness.light
? FlexColor.materialLightPrimary
: FlexColor.materialDarkPrimary;
switch (brightness) {
case Brightness.light:
{
switch (surfaceStyle) {
case FlexSurface.material:
return const FlexSchemeSurfaceColors(
surface: FlexColor.materialLightSurface,
background: FlexColor.materialLightBackground,
scaffoldBackground: FlexColor.materialLightScaffoldBackground,
);
case FlexSurface.light:
return FlexSchemeSurfaceColors(
surface: FlexColor.lightSurface
.blend(primary, kLightBlendSurfaceLight),
background: FlexColor.lightBackground
.blend(primary, kLightBlendBackgroundLight),
scaffoldBackground: FlexColor.lightScaffoldBackground,
);
case FlexSurface.medium:
return FlexSchemeSurfaceColors(
surface: FlexColor.lightSurface
.blend(primary, kLightBlendSurfaceMedium),
background: FlexColor.lightBackground
.blend(primary, kLightBlendBackgroundMedium),
scaffoldBackground: FlexColor.lightScaffoldBackground,
);
case FlexSurface.strong:
return FlexSchemeSurfaceColors(
surface: FlexColor.lightSurface
.blend(primary, kLightBlendSurfaceStrong),
background: FlexColor.lightBackground
.blend(primary, kLightBlendBackgroundStrong),
scaffoldBackground: FlexColor.lightScaffoldBackground,
);
case FlexSurface.heavy:
return FlexSchemeSurfaceColors(
surface: FlexColor.lightSurface
.blend(primary, kLightBlendSurfaceHeavy),
background: FlexColor.lightBackground
.blend(primary, kLightBlendBackgroundHeavy),
scaffoldBackground: FlexColor.lightScaffoldBackground
.blend(primary, kLightBlendScaffoldHeavy),
);
case FlexSurface.custom:
// Custom surface theme returns same surface as standard
// material surface. If surface colors are not overridden by
// providing none null custom surface colors values to the
// FlexColorScheme, the results is the same as material.
return const FlexSchemeSurfaceColors(
surface: FlexColor.materialLightSurface,
background: FlexColor.materialLightBackground,
scaffoldBackground: FlexColor.materialLightScaffoldBackground,
);
}
}
// break;
case Brightness.dark:
{
switch (surfaceStyle) {
case FlexSurface.material:
return const FlexSchemeSurfaceColors(
surface: FlexColor.materialDarkSurface,
background: FlexColor.materialDarkBackground,
scaffoldBackground: FlexColor.materialDarkScaffoldBackground,
);
case FlexSurface.light:
return FlexSchemeSurfaceColors(
surface: FlexColor.darkSurface
.blend(primary, kDarkBlendSurfaceLight),
background: FlexColor.darkBackground
.blend(primary, kDarkBlendBackgroundLight),
scaffoldBackground: FlexColor.darkScaffoldBackground,
);
case FlexSurface.medium:
return FlexSchemeSurfaceColors(
surface: FlexColor.darkSurface
.blend(primary, kDarkBlendSurfaceMedium),
background: FlexColor.darkBackground
.blend(primary, kDarkBlendBackgroundMedium),
scaffoldBackground: FlexColor.darkScaffoldBackground,
);
case FlexSurface.strong:
return FlexSchemeSurfaceColors(
surface: FlexColor.darkSurface
.blend(primary, kDarkBlendSurfaceStrong),
background: FlexColor.darkBackground
.blend(primary, kDarkBlendBackgroundStrong),
scaffoldBackground: FlexColor.darkScaffoldBackground,
);
case FlexSurface.heavy:
return FlexSchemeSurfaceColors(
surface: FlexColor.darkSurface
.blend(primary, kDarkBlendSurfaceHeavy),
background: FlexColor.darkBackground
.blend(primary, kDarkBlendBackgroundHeavy),
scaffoldBackground: FlexColor.darkScaffoldBackground
.blend(primary, kDarkBlendScaffoldHeavy),
);
case FlexSurface.custom:
// Custom surface theme returns same surface colors as standard
// material surface.
// It is up to the implementation of creating the scheme
// to decide what to do when surfaceStyle [FlexSurface.custom]
// is used. If the case is not handled, the custom style
// will just result in the same style as [FlexSurface.material].
return const FlexSchemeSurfaceColors(
surface: FlexColor.materialDarkSurface,
background: FlexColor.materialDarkBackground,
scaffoldBackground: FlexColor.materialDarkScaffoldBackground,
);
}
}
}
}