tooltipsMatchBackground property

When set to true, tooltip background color will match the brightness of the theme's background color.

By default Flutter's Material tooltips use a theme where the tooltip background color brightness is inverted in relation to the overall theme's background color.

FlexColorScheme allows you to use a single toggle to invert this. Light tooltips on light background is e.g. the default style on Windows Desktop toggle. You can use this toggle to use this style, or use it as a means to create a platform adaptive tooltip style, where the Material and Flutter style is used on devices and Web, but the inverted scheme is used on e.g. Windows platform.

Defaults to false, and uses same background style as Material Design guide and Flutter.

Additional tooltip styles when NOT opting in on FlexColorScheme sub themes are:

• tooltipsMatchBackground: false

  • none

• tooltipsMatchBackground: true

  • light theme:
    • background: Color(0xF0FCFCFC),
    • text: black
  • Dark theme:
    • background: Color(0xED444444),
    • text: white
  • Border radius: 4 dp
  • Border: Yes, dividerColor
  • Desktop OS (macOS, Linux, Windows)
    • Font size : 12 dp
  • Mobile OS (iOS, Android, Fuchsia)
    • Font size : 14 dp

Additional styles when opting in on FlexColorScheme sub themes are:

• Desktop OS (macOS, Linux, Windows)
  • Font size : 12 dp
• Mobile OS (iOS, Android, Fuchsia)
  • Font size : 14 dp
• Border radius: 8 dp
• Border: Yes, dividerColor
• tooltipsMatchBackground: false
  • light theme:
    • background: Color(0xFF111111).blendAlpha(primary, 45%) opacity 95%.
    • text: white
  • Dark theme:
    • background: Color(0xFFFFFFFF).blendAlpha(primary, 39%) opacity 95%.
    • text: black
• tooltipsMatchBackground: true
  • light theme:
    • background: Color(0xFFFFFFFF).blendAlpha(primary, 4%) opacity 95%.
    • text: black
  • Dark theme:
    • background: Color(0xFF111111).blendAlpha(primary, 16%) opacity 95%.
    • text: white

When using additional theming via sub-themes properties, its properties will if used override background color, text color and background opacity as well as border radius.