Implement tooltip demo (#220)

gallery/gallery/lib/codeviewer/code_segments.dart

@@ -17533,6 +17533,230 @@ class CodeSegments {
     ]);
   }
 
+  static TextSpan tooltipDemo(BuildContext context) {
+    final CodeStyle codeStyle = CodeStyle.of(context);
+    return TextSpan(children: [
+      TextSpan(
+          style: codeStyle.commentStyle,
+          text: '// Copyright 2019 The Flutter team. All rights reserved.'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a'),
+      TextSpan(
+          style: codeStyle.commentStyle,
+          text:
+              '// Use of this source code is governed by a BSD-style license that can be'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a'),
+      TextSpan(
+          style: codeStyle.commentStyle, text: '// found in the LICENSE file.'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a\u000a'),
+      TextSpan(style: codeStyle.keywordStyle, text: 'import'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(
+          style: codeStyle.stringStyle,
+          text: '\u0027package:flutter/material.dart\u0027'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ';'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a'),
+      TextSpan(style: codeStyle.keywordStyle, text: 'import'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(
+          style: codeStyle.stringStyle,
+          text: '\u0027package:gallery/l10n/gallery_localizations.dart\u0027'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ';'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a\u000a'),
+      TextSpan(style: codeStyle.keywordStyle, text: 'class'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'TooltipDemo'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.keywordStyle, text: 'extends'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'StatelessWidget'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '{'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a  '),
+      TextSpan(style: codeStyle.keywordStyle, text: '@override'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a  '),
+      TextSpan(style: codeStyle.classStyle, text: 'Widget'),
+      TextSpan(style: codeStyle.baseStyle, text: ' build'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.classStyle, text: 'BuildContext'),
+      TextSpan(style: codeStyle.baseStyle, text: ' context'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ')'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '{'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a    '),
+      TextSpan(style: codeStyle.keywordStyle, text: 'return'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'Scaffold'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a      appBar'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'AppBar'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(
+          style: codeStyle.baseStyle,
+          text: '\u000a        automaticallyImplyLeading'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.keywordStyle, text: 'false'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a        title'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'Text'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.classStyle, text: 'GalleryLocalizations'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'of'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: 'context'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ').'),
+      TextSpan(style: codeStyle.baseStyle, text: 'demoTooltipTitle'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a      '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a      body'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'Center'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a        child'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'Padding'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a          padding'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.keywordStyle, text: 'const'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'EdgeInsets'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'all'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.numberStyle, text: '8'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a          child'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'Column'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(
+          style: codeStyle.baseStyle,
+          text: '\u000a            mainAxisAlignment'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'MainAxisAlignment'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'center'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a            children'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '['),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a              '),
+      TextSpan(style: codeStyle.classStyle, text: 'Text'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
+      TextSpan(style: codeStyle.classStyle, text: 'GalleryLocalizations'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'of'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: 'context'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ').'),
+      TextSpan(style: codeStyle.baseStyle, text: 'demoTooltipInstructions'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a                textAlign'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'TextAlign'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'center'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a              '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a              '),
+      TextSpan(style: codeStyle.classStyle, text: 'SizedBox'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: 'height'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.numberStyle, text: '16'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a              '),
+      TextSpan(style: codeStyle.classStyle, text: 'Tooltip'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a                message'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                    '),
+      TextSpan(style: codeStyle.classStyle, text: 'GalleryLocalizations'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'of'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: 'context'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ').'),
+      TextSpan(style: codeStyle.baseStyle, text: 'starterAppTooltipSearch'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                child'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'IconButton'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a                  color'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'Theme'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'of'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: 'context'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ').'),
+      TextSpan(style: codeStyle.baseStyle, text: 'colorScheme'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'primary'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(
+          style: codeStyle.baseStyle,
+          text: '\u000a                  onPressed'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '()'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '{},'),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a                  icon'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'Icon'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.classStyle, text: 'Icons'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'search'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a              '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a            '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '],'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a          '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a        '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a      '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a    '),
+      TextSpan(style: codeStyle.punctuationStyle, text: ');'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a  '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '}'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '}'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a\u000a'),
+    ]);
+  }
+
   static TextSpan bottomAppBarDemo(BuildContext context) {
     final CodeStyle codeStyle = CodeStyle.of(context);
     return TextSpan(children: [

gallery/gallery/lib/data/demos.dart

@@ -31,6 +31,7 @@ import 'package:gallery/demos/material/sliders_demo.dart';
 import 'package:gallery/demos/material/snackbar_demo.dart';
 import 'package:gallery/demos/material/tabs_demo.dart';
 import 'package:gallery/demos/material/text_field_demo.dart';
+import 'package:gallery/demos/material/tooltip_demo.dart';
 import 'package:gallery/demos/reference/colors_demo.dart';
 import 'package:gallery/demos/reference/typography_demo.dart';
 import 'package:gallery/l10n/gallery_localizations.dart';
@@ -541,6 +542,21 @@ List<GalleryDemo> materialDemos(BuildContext context) {
         ),
       ],
     ),
+    GalleryDemo(
+      title: GalleryLocalizations.of(context).demoTooltipTitle,
+      icon: GalleryIcons.tooltip,
+      subtitle: GalleryLocalizations.of(context).demoTooltipSubtitle,
+      configurations: [
+        GalleryDemoConfiguration(
+          title: GalleryLocalizations.of(context).demoTooltipTitle,
+          description: GalleryLocalizations.of(context).demoTooltipDescription,
+          documentationUrl:
+              'https://api.flutter.dev/flutter/material/Tooltip-class.html',
+          buildRoute: (_) => TooltipDemo(),
+          code: CodeSegments.tooltipDemo,
+        ),
+      ],
+    ),
   ];
 }
 

gallery/gallery/lib/demos/material/tooltip_demo.dart

@@ -0,0 +1,46 @@
+// Copyright 2019 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:gallery/l10n/gallery_localizations.dart';
+
+// BEGIN tooltipDemo
+
+class TooltipDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        automaticallyImplyLeading: false,
+        title: Text(GalleryLocalizations.of(context).demoTooltipTitle),
+      ),
+      body: Center(
+        child: Padding(
+          padding: const EdgeInsets.all(8),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Text(
+                GalleryLocalizations.of(context).demoTooltipInstructions,
+                textAlign: TextAlign.center,
+              ),
+              SizedBox(height: 16),
+              Tooltip(
+                message:
+                    GalleryLocalizations.of(context).starterAppTooltipSearch,
+                child: IconButton(
+                  color: Theme.of(context).colorScheme.primary,
+                  onPressed: () {},
+                  icon: Icon(Icons.search),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+// END

gallery/gallery/lib/l10n/gallery_localizations.dart

@@ -2709,6 +2709,36 @@ class GalleryLocalizations {
         desc: r'Title for the toggle buttons component demo.');
   }
 
+  String get demoTooltipDescription {
+    return Intl.message(
+        r'Tooltips provide text labels that help explain the function of a button or other user interface action. Tooltips display informative text when users hover over, focus on, or long press an element.',
+        locale: _localeName,
+        name: 'demoTooltipDescription',
+        desc: r'Description for tooltip demo.');
+  }
+
+  String get demoTooltipInstructions {
+    return Intl.message(r'Long press or hover to display the tooltip.',
+        locale: _localeName,
+        name: 'demoTooltipInstructions',
+        desc:
+            r'Instructions for how to trigger a tooltip in the tooltip demo.');
+  }
+
+  String get demoTooltipSubtitle {
+    return Intl.message(r'Short message displayed on long press or hover',
+        locale: _localeName,
+        name: 'demoTooltipSubtitle',
+        desc: r'Subtitle for tooltip demo.');
+  }
+
+  String get demoTooltipTitle {
+    return Intl.message(r'Tooltips',
+        locale: _localeName,
+        name: 'demoTooltipTitle',
+        desc: r'Title for tooltip demo.');
+  }
+
   String get demoTwoLineListsTitle {
     return Intl.message(r'Two Lines',
         locale: _localeName,

gallery/gallery/lib/l10n/intl_en_US.arb

@@ -1282,6 +1282,22 @@
   "@demoTextFieldRequiredField": {
     "description": "Helper text to indicate that * means that it is a required field."
   },
+  "demoTooltipTitle": "Tooltips",
+  "@demoTooltipTitle": {
+    "description": "Title for tooltip demo."
+  },
+  "demoTooltipSubtitle": "Short message displayed on long press or hover",
+  "@demoTooltipSubtitle": {
+    "description": "Subtitle for tooltip demo."
+  },
+  "demoTooltipDescription": "Tooltips provide text labels that help explain the function of a button or other user interface action. Tooltips display informative text when users hover over, focus on, or long press an element.",
+  "@demoTooltipDescription": {
+    "description": "Description for tooltip demo."
+  },
+  "demoTooltipInstructions": "Long press or hover to display the tooltip.",
+  "@demoTooltipInstructions": {
+    "description": "Instructions for how to trigger a tooltip in the tooltip demo."
+  },
   "bottomNavigationCommentsTab": "Comments",
   "@bottomNavigationCommentsTab": {
     "description": "Title for Comments tab of bottom navigation."

gallery/gallery/lib/l10n/intl_en_US.xml

@@ -1209,6 +1209,22 @@
     name="demoTextFieldRequiredField"
     description="Helper text to indicate that * means that it is a required field."
     >* indicates required field</string>
+  <string
+    name="demoTooltipTitle"
+    description="Title for tooltip demo."
+    >Tooltips</string>
+  <string
+    name="demoTooltipSubtitle"
+    description="Subtitle for tooltip demo."
+    >Short message displayed on long press or hover</string>
+  <string
+    name="demoTooltipDescription"
+    description="Description for tooltip demo."
+    >Tooltips provide text labels that help explain the function of a button or other user interface action. Tooltips display informative text when users hover over, focus on, or long press an element.</string>
+  <string
+    name="demoTooltipInstructions"
+    description="Instructions for how to trigger a tooltip in the tooltip demo."
+    >Long press or hover to display the tooltip.</string>
   <string
     name="bottomNavigationCommentsTab"
     description="Title for Comments tab of bottom navigation."

gallery/gallery/lib/l10n/messages_en_US.dart

@@ -703,6 +703,13 @@ class MessageLookup extends MessageLookupByLibrary {
             "Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container"),
         "demoToggleButtonTitle":
             MessageLookupByLibrary.simpleMessage("Toggle Buttons"),
+        "demoTooltipDescription": MessageLookupByLibrary.simpleMessage(
+            "Tooltips provide text labels that help explain the function of a button or other user interface action. Tooltips display informative text when users hover over, focus on, or long press an element."),
+        "demoTooltipInstructions": MessageLookupByLibrary.simpleMessage(
+            "Long press or hover to display the tooltip."),
+        "demoTooltipSubtitle": MessageLookupByLibrary.simpleMessage(
+            "Short message displayed on long press or hover"),
+        "demoTooltipTitle": MessageLookupByLibrary.simpleMessage("Tooltips"),
         "demoTwoLineListsTitle":
             MessageLookupByLibrary.simpleMessage("Two Lines"),
         "demoTypographyDescription": MessageLookupByLibrary.simpleMessage(