How to add splashColor and highlightColor?

[xtnctx]

Hi, is there an option to add splashColor like in the use of ThemeData?

[rydmike]

Hi @xtnctx,

Thank you for your question. When you activate FlexColorScheme's sub-themes it automatically provides hover, focus, highlight and splash colors that are tuned to match the primary color in your active theme, also if custom colors are used.

If you don't like these effects, you can turn them all OFF and get the Flutter default grey style.

theme: FlexThemeData.light(
  scheme: FlexScheme.flutterDash,
  subThemesData: const FlexSubThemesData(
    interactionEffects: false,
  ),
),

Here is what docs say about this property, it provides a bit more background info.

  /// Opt-in on using color branded hover, focus, highlight and splash
  /// interaction state effects.
  ///
  /// The standard colors on hover, focus, highlight and splash effects use
  /// greys, i.e. white or black with different opacity levels.
  ///
  /// To get a color themed effect, set [interactionEffects] to true, and to
  /// false for the Flutter SDK Material 2 default [ThemeData] values.
  ///
  /// These effects apply to all Widgets that get them from [ThemeData].
  ///
  /// The buttons [ElevatedButton], [OutlinedButton] and [TextButton] define
  /// theme styles that by default use their own themed Material state
  /// effects for hover, focus, highlight and splash. These already include
  /// primary color blends and own different opacity values by default.
  /// The defaults on SDK overall [ThemeData] hover, focus, highlight and
  /// splash do not match this newer design, and they look out of place,
  /// especially in an otherwise primary color, alpha blended theme.
  ///
  /// When you opt-in on [interactionEffects] it makes the overall hover, focus,
  /// highlight and splash effects in [ThemeData] visually consistent with the
  /// style the buttons [ElevatedButton], [OutlinedButton] and [TextButton]
  /// with their own state effects use by default. It is not an exact
  /// match with the [ButtonStyleButton] buttons, the common class for the newer
  /// buttons, but very close. Because of for example the white opacity
  /// overlay used on primary colored button [ElevatedButton], it cannot be
  /// matched exactly in all situations. It is still visually very similar on
  /// most widgets, and does not stick out like the grey splashes do otherwise
  /// when using primary color blended themes.
  ///
  /// For [ToggleButtons] and legacy buttons `RaisedButton`, `OutlineButton`
  /// and `FlatButton` to always match the style the new buttons use,
  /// even when [interactionEffects] style is disabled, they also always use the
  /// same effect as [interactionEffects] provides on overall theme, so that
  /// they always match the [ButtonStyleButton] buttons as closely as possible.
  ///
  /// The effects provided by [interactionEffects] are more visible on large
  /// surface ink effects, like e.g. on the ListTile and SwitchListTile taps,
  /// focus and hover.
  ///
  /// Defaults to true.
  final bool interactionEffects;

If you want to make your own style of all these "interaction effects", you can override the ThemeData that FlexColorScheme produces with copyWith.

theme: FlexThemeData.light(
  scheme: FlexScheme.flutterDash,
  subThemesData: const FlexSubThemesData(
    interactionEffects: false, // Or remove line if you want to start from the themed ones and
                               // only modify one or two of them.
  ),
).copyWith(
  splashColor: mySplashColor,
  focusColor: myFocusColor,
  hoverColor: myHoverColor,
  highlightColor: myHighlightColor,
),

This question is similar to those asked about modifying the component themes, which is mentioned in docs here https://docs.flexcolorscheme.com/faq#how-do-i-modify-the-component-themes-with-custom-features, having previous Q&As here #41, and here #85 as well as the most advanced case here #92.

As can bee seen, when dealing with direct properties in ThemeData, it is very easy to modify them with copyWith on the ThemeData output by FlexColorScheme. A bit easier than doing it on the component sub-themes. FlexColorScheme outputs a standard ThemeData object, so whatever you can do with a ThemeData object you can do with the ThemeData produced by FlexColorScheme as well.

Hope this helps 😃

I'm going to close this issue and move it to the discussions sections, and keep it there as a Q&A. If needed we can continue the discussion there as well.

[xtnctx]

Wow! this is what I'm looking for. Thank you very much. I really love this package😃