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/dialog_demo.dart';
|
||||
import '../demo/drop_down_demo.dart';
|
||||
import '../demo/fitness_demo.dart';
|
||||
import '../demo/grid_list_demo.dart';
|
||||
import '../demo/modal_bottom_sheet_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_fab_demo.dart';
|
||||
import '../demo/time_picker_demo.dart';
|
||||
import '../demo/tooltip_demo.dart';
|
||||
import '../demo/two_level_list_demo.dart';
|
||||
import '../demo/typography_demo.dart';
|
||||
import '../demo/weathers_demo.dart';
|
||||
import '../demo/fitness_demo.dart';
|
||||
|
||||
class GalleryHome extends StatefulComponent {
|
||||
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: 'SnackBar', builder: () => new SnackBarDemo()),
|
||||
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(
|
||||
title: 'Usability',
|
||||
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 {
|
||||
const IconButton({
|
||||
Key key,
|
||||
this.size: IconSize.s24,
|
||||
this.icon,
|
||||
this.colorTheme,
|
||||
this.color,
|
||||
@ -28,6 +29,7 @@ class IconButton extends StatelessComponent {
|
||||
this.tooltip
|
||||
}) : super(key: key);
|
||||
|
||||
final IconSize size;
|
||||
final String icon;
|
||||
final IconThemeColor colorTheme;
|
||||
final Color color;
|
||||
@ -42,6 +44,7 @@ class IconButton extends StatelessComponent {
|
||||
Widget result = new Padding(
|
||||
padding: const EdgeDims.all(8.0),
|
||||
child: new Icon(
|
||||
size: size,
|
||||
icon: icon,
|
||||
colorTheme: colorTheme,
|
||||
color: color
|
||||
|
Loading…
x
Reference in New Issue
Block a user