[Material] Implement TooltipTheme and Tooltip.textStyle, fix Tooltip...

[Material] Implement TooltipTheme and Tooltip.textStyle, fix Tooltip debugLabel, update Tooltip defaults (#36030)

* Implement TooltipThemeData and TooltipTheme

* Add tooltip text style property

* Update default tooltip text style and decoration to match Material specification

* Fix debugLabel incorrectly labeling "white" as "black", and vice versa by default

packages/flutter/lib/material.dart

@@ -116,6 +116,7 @@ export 'src/material/time.dart';
 export 'src/material/time_picker.dart';
 export 'src/material/toggleable.dart';
 export 'src/material/tooltip.dart';
+export 'src/material/tooltip_theme.dart';
 export 'src/material/typography.dart';
 export 'src/material/user_accounts_drawer_header.dart';
 export 'widgets.dart';

packages/flutter/lib/src/material/theme_data.dart

@@ -27,6 +27,7 @@ import 'slider_theme.dart';
 import 'snack_bar_theme.dart';
 import 'tab_bar_theme.dart';
 import 'text_theme.dart';
+import 'tooltip_theme.dart';
 import 'typography.dart';
 
 export 'package:flutter/services.dart' show Brightness;
@@ -155,6 +156,7 @@ class ThemeData extends Diagnosticable {
     IconThemeData accentIconTheme,
     SliderThemeData sliderTheme,
     TabBarTheme tabBarTheme,
+    TooltipThemeData tooltipTheme,
     CardTheme cardTheme,
     ChipThemeData chipTheme,
     TargetPlatform platform,
@@ -257,6 +259,7 @@ class ThemeData extends Diagnosticable {
 
     sliderTheme ??= const SliderThemeData();
     tabBarTheme ??= const TabBarTheme();
+    tooltipTheme ??= const TooltipThemeData();
     appBarTheme ??= const AppBarTheme();
     bottomAppBarTheme ??= const BottomAppBarTheme();
     cardTheme ??= const CardTheme();
@@ -313,6 +316,7 @@ class ThemeData extends Diagnosticable {
       accentIconTheme: accentIconTheme,
       sliderTheme: sliderTheme,
       tabBarTheme: tabBarTheme,
+      tooltipTheme: tooltipTheme,
       cardTheme: cardTheme,
       chipTheme: chipTheme,
       platform: platform,
@@ -383,6 +387,7 @@ class ThemeData extends Diagnosticable {
     @required this.accentIconTheme,
     @required this.sliderTheme,
     @required this.tabBarTheme,
+    @required this.tooltipTheme,
     @required this.cardTheme,
     @required this.chipTheme,
     @required this.platform,
@@ -438,6 +443,7 @@ class ThemeData extends Diagnosticable {
        assert(accentIconTheme != null),
        assert(sliderTheme != null),
        assert(tabBarTheme != null),
+       assert(tooltipTheme != null),
        assert(cardTheme != null),
        assert(chipTheme != null),
        assert(platform != null),
@@ -658,12 +664,17 @@ class ThemeData extends Diagnosticable {
   /// A theme for customizing the size, shape, and color of the tab bar indicator.
   final TabBarTheme tabBarTheme;
 
+  /// A theme for customizing the visual properties of [Tooltip]s.
+  ///
+  /// This is the value returned from [TooltipTheme.of].
+  final TooltipThemeData tooltipTheme;
+
   /// The colors and styles used to render [Card].
   ///
   /// This is the value returned from [CardTheme.of].
   final CardTheme cardTheme;
 
-  /// The colors and styles used to render [Chip], [
+  /// The colors and styles used to render [Chip]s.
   ///
   /// This is the value returned from [ChipTheme.of].
   final ChipThemeData chipTheme;
@@ -811,6 +822,7 @@ class ThemeData extends Diagnosticable {
     IconThemeData accentIconTheme,
     SliderThemeData sliderTheme,
     TabBarTheme tabBarTheme,
+    TooltipThemeData tooltipTheme,
     CardTheme cardTheme,
     ChipThemeData chipTheme,
     TargetPlatform platform,
@@ -870,6 +882,7 @@ class ThemeData extends Diagnosticable {
       accentIconTheme: accentIconTheme ?? this.accentIconTheme,
       sliderTheme: sliderTheme ?? this.sliderTheme,
       tabBarTheme: tabBarTheme ?? this.tabBarTheme,
+      tooltipTheme: tooltipTheme ?? this.tooltipTheme,
       cardTheme: cardTheme ?? this.cardTheme,
       chipTheme: chipTheme ?? this.chipTheme,
       platform: platform ?? this.platform,
@@ -1007,6 +1020,7 @@ class ThemeData extends Diagnosticable {
       accentIconTheme: IconThemeData.lerp(a.accentIconTheme, b.accentIconTheme, t),
       sliderTheme: SliderThemeData.lerp(a.sliderTheme, b.sliderTheme, t),
       tabBarTheme: TabBarTheme.lerp(a.tabBarTheme, b.tabBarTheme, t),
+      tooltipTheme: TooltipThemeData.lerp(a.tooltipTheme, b.tooltipTheme, t),
       cardTheme: CardTheme.lerp(a.cardTheme, b.cardTheme, t),
       chipTheme: ChipThemeData.lerp(a.chipTheme, b.chipTheme, t),
       platform: t < 0.5 ? a.platform : b.platform,
@@ -1072,6 +1086,7 @@ class ThemeData extends Diagnosticable {
            (otherData.accentIconTheme == accentIconTheme) &&
            (otherData.sliderTheme == sliderTheme) &&
            (otherData.tabBarTheme == tabBarTheme) &&
+           (otherData.tooltipTheme == tooltipTheme) &&
            (otherData.cardTheme == cardTheme) &&
            (otherData.chipTheme == chipTheme) &&
            (otherData.platform == platform) &&
@@ -1136,6 +1151,7 @@ class ThemeData extends Diagnosticable {
       accentIconTheme,
       sliderTheme,
       tabBarTheme,
+      tooltipTheme,
       cardTheme,
       chipTheme,
       platform,
@@ -1198,6 +1214,7 @@ class ThemeData extends Diagnosticable {
     properties.add(DiagnosticsProperty<IconThemeData>('accentIconTheme', accentIconTheme));
     properties.add(DiagnosticsProperty<SliderThemeData>('sliderTheme', sliderTheme));
     properties.add(DiagnosticsProperty<TabBarTheme>('tabBarTheme', tabBarTheme));
+    properties.add(DiagnosticsProperty<TooltipThemeData>('tooltipTheme', tooltipTheme));
     properties.add(DiagnosticsProperty<CardTheme>('cardTheme', cardTheme));
     properties.add(DiagnosticsProperty<ChipThemeData>('chipTheme', chipTheme));
     properties.add(DiagnosticsProperty<MaterialTapTargetSize>('materialTapTargetSize', materialTapTargetSize));

packages/flutter/lib/src/material/tooltip_theme.dart

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:ui' show lerpDouble;
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
+
+import 'theme.dart';
+
+/// Defines the visual properties of [Tooltip] widgets.
+///
+/// Used by [TooltipTheme] to control the visual properties of tooltips in a
+/// widget subtree.
+///
+/// To obtain this configuration, use [TooltipTheme.of] to access the closest
+/// ancestor [TooltipTheme] of the current [BuildContext].
+///
+/// See also:
+///
+///  * [TooltipTheme], an [InheritedWidget] that propagates the theme down its
+///    subtree.
+///  * [TooltipThemeData], which describes the actual configuration of a
+///    tooltip theme.
+class TooltipThemeData extends Diagnosticable {
+  /// Creates the set of properties used to configure [Tooltip]s.
+  const TooltipThemeData({
+    this.height,
+    this.padding,
+    this.verticalOffset,
+    this.preferBelow,
+    this.excludeFromSemantics,
+    this.decoration,
+    this.textStyle,
+    this.waitDuration,
+    this.showDuration,
+  });
+
+  /// The height of [Tooltip.child].
+  final double height;
+
+  /// If provided, the amount of space by which to inset [Tooltip.child].
+  final EdgeInsetsGeometry padding;
+
+  /// The vertical gap between the widget and the displayed tooltip.
+  ///
+  /// When [preferBelow] is set to true and tooltips have sufficient space to
+  /// display themselves, this property defines how much vertical space
+  /// tooltips will position themselves under their corresponding widgets.
+  /// Otherwise, tooltips will position themselves above their corresponding
+  /// widgets with the given offset.
+  final double verticalOffset;
+
+  /// Whether the tooltip is displayed below its widget by default.
+  ///
+  /// If there is insufficient space to display the tooltip in the preferred
+  /// direction, the tooltip will be displayed in the opposite direction.
+  final bool preferBelow;
+
+  /// Whether the tooltip's [message] should be excluded from the semantics
+  /// tree.
+  ///
+  /// By default, [Tooltip]s will add a [Semantics.label] that is set to
+  /// [Tooltip.message]. Set this property to true if the app is going to
+  /// provide its own custom semantics label.
+  final bool excludeFromSemantics;
+
+  /// The [Tooltip]'s shape and background color.
+  final Decoration decoration;
+
+  /// The style to use for the message of [Tooltip]s.
+  final TextStyle textStyle;
+
+  /// The length of time that a pointer must hover over a tooltip's widget
+  /// before the tooltip will be shown.
+  final Duration waitDuration;
+
+  /// The length of time that the tooltip will be shown once it has appeared.
+  final Duration showDuration;
+
+  /// Creates a copy of this object but with the given fields replaced with the
+  /// new values.
+  TooltipThemeData copyWith({
+    double height,
+    EdgeInsetsGeometry padding,
+    double verticalOffset,
+    bool preferBelow,
+    bool excludeFromSemantics,
+    Decoration decoration,
+    TextStyle textStyle,
+    Duration waitDuration,
+    Duration showDuration,
+  }) {
+    return TooltipThemeData(
+      height: height ?? this.height,
+      padding: padding ?? this.padding,
+      verticalOffset: verticalOffset ?? this.verticalOffset,
+      preferBelow: preferBelow ?? this.preferBelow,
+      excludeFromSemantics: excludeFromSemantics ?? this.excludeFromSemantics,
+      decoration: decoration ?? this.decoration,
+      textStyle: textStyle ?? this.textStyle,
+      waitDuration: waitDuration ?? this.waitDuration,
+      showDuration: showDuration ?? this.showDuration,
+    );
+  }
+
+  /// Linearly interpolate between two tooltip themes.
+  ///
+  /// If both arguments are null, then null is returned.
+  ///
+  /// {@macro dart.ui.shadow.lerp}
+  static TooltipThemeData lerp(TooltipThemeData a, TooltipThemeData b, double t) {
+    if (a == null && b == null)
+      return null;
+    assert(t != null);
+    return TooltipThemeData(
+      height: lerpDouble(a?.height, b?.height, t),
+      padding: EdgeInsets.lerp(a?.padding, b?.padding, t),
+      verticalOffset: lerpDouble(a?.verticalOffset, b?.verticalOffset, t),
+      preferBelow: t < 0.5 ? a.preferBelow: b.preferBelow,
+      excludeFromSemantics: t < 0.5 ? a.excludeFromSemantics : b.excludeFromSemantics,
+      decoration: Decoration.lerp(a?.decoration, b?.decoration, t),
+      textStyle: TextStyle.lerp(a?.textStyle, b?.textStyle, t),
+    );
+  }
+
+  @override
+  int get hashCode {
+    return hashValues(
+      height,
+      padding,
+      verticalOffset,
+      preferBelow,
+      excludeFromSemantics,
+      decoration,
+      textStyle,
+      waitDuration,
+      showDuration,
+    );
+  }
+
+  @override
+  bool operator==(Object other) {
+    if (identical(this, other))
+      return true;
+    if (other.runtimeType != runtimeType)
+      return false;
+    final TooltipThemeData typedOther = other;
+    return typedOther.height == height
+        && typedOther.padding == padding
+        && typedOther.verticalOffset == verticalOffset
+        && typedOther.preferBelow == preferBelow
+        && typedOther.excludeFromSemantics == excludeFromSemantics
+        && typedOther.decoration == decoration
+        && typedOther.textStyle == textStyle
+        && typedOther.waitDuration == waitDuration
+        && typedOther.showDuration == showDuration;
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(DoubleProperty('height', height, defaultValue: null));
+    properties.add(DiagnosticsProperty<EdgeInsetsGeometry>('padding', padding, defaultValue: null));
+    properties.add(DoubleProperty('vertical offset', verticalOffset, defaultValue: null));
+    properties.add(FlagProperty('position', value: preferBelow, ifTrue: 'below', ifFalse: 'above', showName: true, defaultValue: null));
+    properties.add(FlagProperty('semantics', value: excludeFromSemantics, ifTrue: 'excluded', showName: true, defaultValue: null));
+    properties.add(DiagnosticsProperty<Decoration>('decoration', decoration, defaultValue: null));
+    properties.add(DiagnosticsProperty<TextStyle>('textStyle', textStyle, defaultValue: null));
+    properties.add(DiagnosticsProperty<Duration>('wait duration', waitDuration, defaultValue: null));
+    properties.add(DiagnosticsProperty<Duration>('show duration', showDuration, defaultValue: null));
+  }
+}
+
+/// An inherited widget that defines the configuration for
+/// [Tooltip]s in this widget's subtree.
+///
+/// Values specified here are used for [Tooltip] properties that are not
+/// given an explicit non-null value.
+///
+/// {@tool sample}
+///
+/// Here is an example of a tooltip theme that applies a blue foreground
+/// with non-rounded corners.
+///
+/// ```dart
+/// TooltipTheme(
+///   decoration: BoxDecoration(
+///     color: Colors.blue.withOpacity(0.9),
+///     borderRadius: BorderRadius.zero,
+///   ),
+///   child: Tooltip(
+///     message: 'Example tooltip',
+///     child: IconButton(
+///       iconSize: 36.0,
+///       icon: Icon(Icons.touch_app),
+///       onPressed: () {},
+///     ),
+///   ),
+/// ),
+/// ```
+/// {@end-tool}
+class TooltipTheme extends InheritedWidget {
+  /// Creates a tooltip theme that controls the configurations for
+  /// [Tooltip].
+  TooltipTheme({
+    Key key,
+    double height,
+    EdgeInsetsGeometry padding,
+    double verticalOffset,
+    bool preferBelow,
+    bool excludeFromSemantics,
+    Decoration decoration,
+    TextStyle textStyle,
+    Duration waitDuration,
+    Duration showDuration,
+    Widget child,
+  }) : data = TooltipThemeData(
+         height: height,
+         padding: padding,
+         verticalOffset: verticalOffset,
+         preferBelow: preferBelow,
+         excludeFromSemantics: excludeFromSemantics,
+         decoration: decoration,
+         textStyle: textStyle,
+         waitDuration: waitDuration,
+         showDuration: showDuration,
+       ),
+       super(key: key, child: child);
+
+  /// The properties for descendant [Tooltip] widgets.
+  final TooltipThemeData data;
+
+  /// Returns the [data] from the closest [TooltipTheme] ancestor. If there is
+  /// no ancestor, it returns [ThemeData.tooltipTheme]. Applications can assume
+  /// that the returned value will not be null.
+  ///
+  /// Typical usage is as follows:
+  ///
+  /// ```dart
+  /// TooltipThemeData theme = TooltipTheme.of(context);
+  /// ```
+  static TooltipThemeData of(BuildContext context) {
+    final TooltipTheme tooltipTheme = context.inheritFromWidgetOfExactType(TooltipTheme);
+    return tooltipTheme?.data ?? Theme.of(context).tooltipTheme;
+  }
+
+  @override
+  bool updateShouldNotify(TooltipTheme oldWidget) => data != oldWidget.data;
+}

packages/flutter/test/material/tooltip_test.dart

@@ -423,6 +423,81 @@ void main() {
     expect(tip.localToGlobal(tip.size.bottomRight(Offset.zero)).dy, equals(324.0));
   }, skip: isBrowser);
 
+  testWidgets('Default tooltip message textStyle - light', (WidgetTester tester) async {
+    final GlobalKey key = GlobalKey();
+    await tester.pumpWidget(MaterialApp(
+      home: Tooltip(
+        key: key,
+        message: tooltipText,
+        child: Container(
+          width: 100.0,
+          height: 100.0,
+          color: Colors.green[500],
+        ),
+      ),
+    ));
+    (key.currentState as dynamic).ensureTooltipVisible(); // Before using "as dynamic" in your code, see note at the top of the file.
+    await tester.pump(const Duration(seconds: 2)); // faded in, show timer started (and at 0.0)
+
+    final TextStyle textStyle = tester.widget<Text>(find.text(tooltipText)).style;
+    expect(textStyle.color, Colors.white);
+    expect(textStyle.fontFamily, 'Roboto');
+    expect(textStyle.decoration, TextDecoration.none);
+    expect(textStyle.debugLabel, '(englishLike body1 2014).merge(whiteMountainView body1)');
+  });
+
+  testWidgets('Default tooltip message textStyle - dark', (WidgetTester tester) async {
+    final GlobalKey key = GlobalKey();
+    await tester.pumpWidget(MaterialApp(
+      theme: ThemeData(
+        brightness: Brightness.dark,
+      ),
+      home: Tooltip(
+        key: key,
+        message: tooltipText,
+        child: Container(
+          width: 100.0,
+          height: 100.0,
+          color: Colors.green[500],
+        ),
+      ),
+    ));
+    (key.currentState as dynamic).ensureTooltipVisible(); // Before using "as dynamic" in your code, see note at the top of the file.
+    await tester.pump(const Duration(seconds: 2)); // faded in, show timer started (and at 0.0)
+
+    final TextStyle textStyle = tester.widget<Text>(find.text(tooltipText)).style;
+    expect(textStyle.color, Colors.black);
+    expect(textStyle.fontFamily, 'Roboto');
+    expect(textStyle.decoration, TextDecoration.none);
+    expect(textStyle.debugLabel, '(englishLike body1 2014).merge(blackMountainView body1)');
+  });
+
+  testWidgets('Custom tooltip message textStyle', (WidgetTester tester) async {
+    final GlobalKey key = GlobalKey();
+    await tester.pumpWidget(MaterialApp(
+      home: Tooltip(
+        key: key,
+        textStyle: const TextStyle(
+          color: Colors.orange,
+          decoration: TextDecoration.underline
+        ),
+        message: tooltipText,
+        child: Container(
+          width: 100.0,
+          height: 100.0,
+          color: Colors.green[500],
+        ),
+      ),
+    ));
+    (key.currentState as dynamic).ensureTooltipVisible(); // Before using "as dynamic" in your code, see note at the top of the file.
+    await tester.pump(const Duration(seconds: 2)); // faded in, show timer started (and at 0.0)
+
+    final TextStyle textStyle = tester.widget<Text>(find.text(tooltipText)).style;
+    expect(textStyle.color, Colors.orange);
+    expect(textStyle.fontFamily, null);
+    expect(textStyle.decoration, TextDecoration.underline);
+  });
+
   testWidgets('Does tooltip end up with the right default size, shape, and color', (WidgetTester tester) async {
     final GlobalKey key = GlobalKey();
     await tester.pumpWidget(
@@ -856,7 +931,6 @@ void main() {
 
     expect(description, <String>[
       '"message"',
-      'position: below',
     ]);
   });
   testWidgets('Tooltip implements debugFillProperties', (WidgetTester tester) async {