interactionEffects property
Flag used to enable color tinted hover, focus, highlight, selected, pressed and splash interaction state effects.
The standard Flutter colors in both M2 and M3 mode for hover, focus, highlight, selected, pressed and splash state effects often look grey. They typically use surface or onSurface color with opacity. Often this is white or black with different opacity levels. This is not very color expressive and sometimes even look out of character in M3 mode.
For some widgets and their colors, the default Flutter interaction effects in M3 mode work pretty well. However, when theming widgets with different colors than default M3 values, especially if the color is off a different brightness, the effects often break down and become to grey heavy or almost invisible.
To get a color themed effect, set interactionEffects to true. The used tint color depends on the UI control's main themed color, or element color being used in a widget many colors. Not on surface or onSurface colors, that to their defense in M3 mode contain a slight tint of primary color.
This design makes all the interaction effects work with the UI components color matching effects, regardless of how it is themed. It delivers more color expressiveness than Flutter's default M2 and M3 styles.
This feature is implemented by always in all sub-themes' WidgetState overlay states using the helper functions:
- FlexSubThemes.tintedHovered,
- FlexSubThemes.tintedHighlight
- FlexSubThemes.tintedSplash
- FlexSubThemes.tintedPressed
- FlexSubThemes.tintedFocused
In combination with internal function
FlexSubThemes._tintAlphaFactor
, to vary the strengths depending on light/dark theme mode and brightness of color on the tinted widget. The effect is also different for primarily surface colored widgets.
This feature also sets ThemeData.focusColor, ThemeData.hoverColor, ThemeData.highlightColor and ThemeData.splashColor in same styles. However, these colors are used less and less by widgets, and no full Material 3 mode supporting widgets use them, starting from Flutter 3.7. These ThemeData colors might eventually be added back to the deprecation roadmap, see Material ThemeData issue, but probably not very soon. Regardless, this feature in FlexColorScheme is well prepared for any such deprecations.
Implementing this theming feature manually on all widgets, is very tedious and requires a large number of theming definitions on every used control. It is sometimes also quite complex and requires understanding of how overlay colors work and are used by widgets.
Some widget's in Flutter still have gaps or bugs in their implementation of WidgetState and only works partially. Compromises had to be made in some cases. These cases will be improved when support for them in Flutter is corrected. The status of these issues and gaps are tracked in FlexColorScheme docs known issues chapter.
Keep it false to use Flutter's default interactions effects. Defaults to false.
Implementation
//
/// In combination with internal function [FlexSubThemes._tintAlphaFactor],
/// to vary the strengths depending on light/dark theme mode and brightness
/// of color on the tinted widget. The effect is also different for primarily
/// surface colored widgets.
///
/// This feature also sets [ThemeData.focusColor], [ThemeData.hoverColor],
/// [ThemeData.highlightColor] and [ThemeData.splashColor] in same styles.
/// However, these colors are used less and less by widgets, and no full
/// Material 3 mode supporting widgets use them, starting from Flutter 3.7.
/// These [ThemeData] colors might eventually be added back to the
/// deprecation roadmap, see Material
/// [ThemeData issue](https://github.com/flutter/flutter/issues/91772), but
/// probably not very soon. Regardless, this feature in FlexColorScheme is
/// well prepared for any such deprecations.
///
/// Implementing this theming feature manually on all widgets, is very tedious
/// and requires a large number of theming definitions on every used control.
/// It is sometimes also quite complex and requires understanding of how
/// overlay colors work and are used by widgets.
///
/// Some widget's in Flutter still have gaps or bugs in their implementation
/// of [WidgetState] and only works partially. Compromises had to be made in
/// some cases. These cases will be improved when support for them in
/// Flutter is corrected. The status of these issues and gaps are tracked
/// in FlexColorScheme docs
/// [known issues](https://docs.flexcolorscheme.com/known_issues) chapter.
///
/// Keep it false to use Flutter's default interactions effects.
//
/// Defaults to false.
final bool interactionEffects;