diff --git a/gallery/gallery/lib/codeviewer/code_segments.dart b/gallery/gallery/lib/codeviewer/code_segments.dart index fff2ceab8..d2b9c9968 100644 --- a/gallery/gallery/lib/codeviewer/code_segments.dart +++ b/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: [ diff --git a/gallery/gallery/lib/data/demos.dart b/gallery/gallery/lib/data/demos.dart index 51f910ad5..76f52b7ed 100644 --- a/gallery/gallery/lib/data/demos.dart +++ b/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 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, + ), + ], + ), ]; } diff --git a/gallery/gallery/lib/demos/material/tooltip_demo.dart b/gallery/gallery/lib/demos/material/tooltip_demo.dart new file mode 100644 index 000000000..43251feec --- /dev/null +++ b/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 diff --git a/gallery/gallery/lib/l10n/gallery_localizations.dart b/gallery/gallery/lib/l10n/gallery_localizations.dart index 3125f7dc5..7e4ec54a0 100644 --- a/gallery/gallery/lib/l10n/gallery_localizations.dart +++ b/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, diff --git a/gallery/gallery/lib/l10n/intl_en_US.arb b/gallery/gallery/lib/l10n/intl_en_US.arb index 89ae56b1d..126f949a0 100644 --- a/gallery/gallery/lib/l10n/intl_en_US.arb +++ b/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." diff --git a/gallery/gallery/lib/l10n/intl_en_US.xml b/gallery/gallery/lib/l10n/intl_en_US.xml index abebd7c6a..488a6eb61 100644 --- a/gallery/gallery/lib/l10n/intl_en_US.xml +++ b/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 + Tooltips + Short message displayed on long press or hover + 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. + Long press or hover to display the tooltip.