Tooltip gallery demo
This commit is contained in:
parent
e63bcc2a90
commit
f989d3b855
65
examples/material_gallery/lib/demo/tooltip_demo.dart
Normal file
65
examples/material_gallery/lib/demo/tooltip_demo.dart
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
// Copyright 2016 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 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
const String _introText =
|
||||||
|
"Tooltips are short identifying messages that briefly appear in response to "
|
||||||
|
"a long press. Tooltip messages are also used by services that make Flutter "
|
||||||
|
"apps accessible, like screen readers.";
|
||||||
|
|
||||||
|
class TooltipDemo extends StatelessComponent {
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final ThemeData theme = Theme.of(context);
|
||||||
|
return new Scaffold(
|
||||||
|
toolBar: new ToolBar(
|
||||||
|
center: new Text('Tooltip')
|
||||||
|
),
|
||||||
|
body: new Builder(
|
||||||
|
builder: (BuildContext context) {
|
||||||
|
return new Column(
|
||||||
|
alignItems: FlexAlignItems.stretch,
|
||||||
|
children: <Widget>[
|
||||||
|
new Text(_introText, style: theme.text.subhead),
|
||||||
|
new Row(
|
||||||
|
children: <Widget>[
|
||||||
|
new Text('Long press the ', style: theme.text.subhead),
|
||||||
|
new Tooltip(
|
||||||
|
message: 'call icon',
|
||||||
|
child: new Icon(
|
||||||
|
size: IconSize.s18,
|
||||||
|
icon: 'communication/call',
|
||||||
|
color: theme.primaryColor
|
||||||
|
)
|
||||||
|
),
|
||||||
|
new Text(' icon', style: theme.text.subhead)
|
||||||
|
]
|
||||||
|
),
|
||||||
|
new Center(
|
||||||
|
child: new IconButton(
|
||||||
|
size: IconSize.s48,
|
||||||
|
icon: 'communication/call',
|
||||||
|
color: theme.primaryColor,
|
||||||
|
tooltip: 'place a phone call',
|
||||||
|
onPressed: () {
|
||||||
|
Scaffold.of(context).showSnackBar(new SnackBar(
|
||||||
|
content: new Text('That was an ordinary tap')
|
||||||
|
));
|
||||||
|
}
|
||||||
|
)
|
||||||
|
)
|
||||||
|
]
|
||||||
|
.map((Widget widget) {
|
||||||
|
return new Padding(
|
||||||
|
padding: const EdgeDims.only(top: 16.0, left: 16.0, right: 16.0),
|
||||||
|
child: widget
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.toList()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -16,6 +16,7 @@ import '../demo/chip_demo.dart';
|
|||||||
import '../demo/date_picker_demo.dart';
|
import '../demo/date_picker_demo.dart';
|
||||||
import '../demo/dialog_demo.dart';
|
import '../demo/dialog_demo.dart';
|
||||||
import '../demo/drop_down_demo.dart';
|
import '../demo/drop_down_demo.dart';
|
||||||
|
import '../demo/fitness_demo.dart';
|
||||||
import '../demo/grid_list_demo.dart';
|
import '../demo/grid_list_demo.dart';
|
||||||
import '../demo/modal_bottom_sheet_demo.dart';
|
import '../demo/modal_bottom_sheet_demo.dart';
|
||||||
import '../demo/page_selector_demo.dart';
|
import '../demo/page_selector_demo.dart';
|
||||||
@ -28,10 +29,10 @@ import '../demo/snack_bar_demo.dart';
|
|||||||
import '../demo/tabs_demo.dart';
|
import '../demo/tabs_demo.dart';
|
||||||
import '../demo/tabs_fab_demo.dart';
|
import '../demo/tabs_fab_demo.dart';
|
||||||
import '../demo/time_picker_demo.dart';
|
import '../demo/time_picker_demo.dart';
|
||||||
|
import '../demo/tooltip_demo.dart';
|
||||||
import '../demo/two_level_list_demo.dart';
|
import '../demo/two_level_list_demo.dart';
|
||||||
import '../demo/typography_demo.dart';
|
import '../demo/typography_demo.dart';
|
||||||
import '../demo/weathers_demo.dart';
|
import '../demo/weathers_demo.dart';
|
||||||
import '../demo/fitness_demo.dart';
|
|
||||||
|
|
||||||
class GalleryHome extends StatefulComponent {
|
class GalleryHome extends StatefulComponent {
|
||||||
GalleryHome({ Key key }) : super(key: key);
|
GalleryHome({ Key key }) : super(key: key);
|
||||||
@ -111,7 +112,8 @@ class GalleryHomeState extends State<GalleryHome> {
|
|||||||
new GalleryDemo(title: 'Sliders', builder: () => new SliderDemo()),
|
new GalleryDemo(title: 'Sliders', builder: () => new SliderDemo()),
|
||||||
new GalleryDemo(title: 'SnackBar', builder: () => new SnackBarDemo()),
|
new GalleryDemo(title: 'SnackBar', builder: () => new SnackBarDemo()),
|
||||||
new GalleryDemo(title: 'Tabs', builder: () => new TabsDemo()),
|
new GalleryDemo(title: 'Tabs', builder: () => new TabsDemo()),
|
||||||
new GalleryDemo(title: 'Time Picker', builder: () => new TimePickerDemo())
|
new GalleryDemo(title: 'Time Picker', builder: () => new TimePickerDemo()),
|
||||||
|
new GalleryDemo(title: 'Tooltips', builder: () => new TooltipDemo())
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
]
|
]
|
||||||
@ -129,7 +131,10 @@ class GalleryHomeState extends State<GalleryHome> {
|
|||||||
new GallerySection(
|
new GallerySection(
|
||||||
title: 'Usability',
|
title: 'Usability',
|
||||||
image: 'assets/section_usability.png',
|
image: 'assets/section_usability.png',
|
||||||
colors: Colors.lightGreen
|
colors: Colors.lightGreen,
|
||||||
|
demos: <GalleryDemo>[
|
||||||
|
new GalleryDemo(title: 'Tooltips', builder: () => new TooltipDemo())
|
||||||
|
]
|
||||||
)
|
)
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
|
@ -21,6 +21,7 @@ import 'tooltip.dart';
|
|||||||
class IconButton extends StatelessComponent {
|
class IconButton extends StatelessComponent {
|
||||||
const IconButton({
|
const IconButton({
|
||||||
Key key,
|
Key key,
|
||||||
|
this.size: IconSize.s24,
|
||||||
this.icon,
|
this.icon,
|
||||||
this.colorTheme,
|
this.colorTheme,
|
||||||
this.color,
|
this.color,
|
||||||
@ -28,6 +29,7 @@ class IconButton extends StatelessComponent {
|
|||||||
this.tooltip
|
this.tooltip
|
||||||
}) : super(key: key);
|
}) : super(key: key);
|
||||||
|
|
||||||
|
final IconSize size;
|
||||||
final String icon;
|
final String icon;
|
||||||
final IconThemeColor colorTheme;
|
final IconThemeColor colorTheme;
|
||||||
final Color color;
|
final Color color;
|
||||||
@ -42,6 +44,7 @@ class IconButton extends StatelessComponent {
|
|||||||
Widget result = new Padding(
|
Widget result = new Padding(
|
||||||
padding: const EdgeDims.all(8.0),
|
padding: const EdgeDims.all(8.0),
|
||||||
child: new Icon(
|
child: new Icon(
|
||||||
|
size: size,
|
||||||
icon: icon,
|
icon: icon,
|
||||||
colorTheme: colorTheme,
|
colorTheme: colorTheme,
|
||||||
color: color
|
color: color
|
||||||
|
Loading…
x
Reference in New Issue
Block a user