Commit f989d3b8 authored by Hans Muller's avatar Hans Muller

Tooltip gallery demo

parent e63bcc2a
// 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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment