FlexSchemeSurfaceColors.from constructor

FlexSchemeSurfaceColors.from({ 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,
            );
        }
      }
  }
}