Skip to content

F
Front-End
Commit 738fa84b authored by Hans Muller's avatar Hans Muller
Browse files
Options

Merge pull request #1766 from HansMuller/dialog_demos 

Flutter gallery dialog demos
parents 8b122987 66d85527
Hide whitespace changes
Inline Side-by-side
Showing with 469 additions and 30 deletions
examples/material_gallery/flutter.yaml
View file @ 738fa84b
......@@ -19,6 +19,7 @@ assets:
- packages/flutter_gallery_assets/icon-rain.png
- packages/flutter_gallery_assets/icon-snow.png
material-design-icons:
- name: action/account_circle
- name: action/alarm
- name: action/android
- name: action/event
......@@ -31,6 +32,8 @@ material-design-icons:
- name: communication/location_on
- name: communication/message
- name: content/add
- name: content/add_circle
- name: content/clear
- name: content/create
- name: image/brightness_5
- name: image/brightness_7
......
examples/material_gallery/lib/demo/buttons_demo.dart
View file @ 738fa84b
......@@ -79,7 +79,9 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
child: new FloatingActionButton(
child: new Icon(icon: 'content/add'),
onPressed: () {
Navigator.push(context, new MaterialPageRoute(builder: (_) => new TabsFabDemo()));
Navigator.push(context, new MaterialPageRoute(
builder: (BuildContext context) => new TabsFabDemo()
));
}
)
)
......@@ -94,7 +96,9 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
new RaisedButton(
child: new Text("Launch Demo"),
onPressed: () {
Navigator.push(context, new MaterialPageRoute(builder: (_) => new SnackBarDemo()));
Navigator.push(context, new MaterialPageRoute(
builder: (BuildContext context) => new SnackBarDemo()
));
}
),
new RaisedButton(
......@@ -122,13 +126,9 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
new FlatButton(
child: new Text("Launch Demo"),
onPressed: () {
showDialog(context: context, child: new DialogDemo()).then((String value) {
if (value != null) {
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text('You dismissed the dialog with "$value"')
));
}
});
Navigator.push(context, new MaterialPageRoute(
builder: (_) => new DialogDemo()
));
}
),
new FlatButton(
......
examples/material_gallery/lib/demo/dialog_demo.dart
View file @ 738fa84b
......@@ -5,33 +5,218 @@
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
const String _dialogText =
"Use dialogs sparingly because they are interruptive. Their sudden appearance "
"forces users to stop their current task and focus on the dialog content. "
"Alternatives to dialogs include menus or inline expansion, both of which "
"maintain the current context.";
import 'full_screen_dialog_demo.dart';
class DialogDemo extends StatelessComponent {
DialogDemo({ Key key }) : super(key: key);
enum DialogDemoAction {
cancel,
discard,
disagree,
agree,
}
const String _introText =
"Use dialogs sparingly because their sudden appearance forces users to stop their "
"current task and focus on the dialog's content. Alternatives to dialogs include "
"menus or inline expansion, both of which maintain the current context.";
const String _alertWithoutTitleText = "Discard draft?";
const String _alertWithTitleText =
"Let Google help apps determine location. This means sending anyonmous location "
"data to Google, even when no apps are running.";
class DialogDemoItem extends StatelessComponent {
DialogDemoItem({ Key key, this.icon, this.color, this.text, this.onPressed }) : super(key: key);
final String icon;
final Color color;
final String text;
final VoidCallback onPressed;
Widget build(BuildContext context) {
return new InkWell(
onTap: onPressed,
child: new Padding(
padding: const EdgeDims.symmetric(vertical: 8.0),
child: new Row(
justifyContent: FlexJustifyContent.start,
alignItems: FlexAlignItems.center,
children: <Widget>[
new Icon(
size: IconSize.s36,
icon: icon,
color: color
),
new Padding(
padding: const EdgeDims.only(left: 16.0),
child: new Text(text)
)
]
)
)
);
}
}
class DialogDemo extends StatefulComponent {
DialogDemoState createState() => new DialogDemoState();
}
class DialogDemoState extends State<DialogDemo> {
final GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();
void showDemoDialog({ BuildContext context, Dialog dialog }) {
showDialog(
context: context,
child: dialog
)
.then((dynamic value) { // The value passed to Navigator.pop() or null.
if (value != null) {
scaffoldKey.currentState.showSnackBar(new SnackBar(
content: new Text('You selected: $value')
));
}
});
}
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
return new Dialog(
title: new Text("This is a Dialog"),
content: new Text(
_dialogText,
style: theme.text.subhead.copyWith(color: theme.text.caption.color)
final TextStyle dialogTextStyle = theme.text.subhead.copyWith(color: theme.text.caption.color);
return new Scaffold(
key: scaffoldKey,
toolBar: new ToolBar(
center: new Text('Dialogs')
),
actions: <Widget>[
new FlatButton(
child: new Text("CANCEL"),
onPressed: () { Navigator.pop(context, "CANCEL"); }
),
new FlatButton(
child: new Text("OK"),
onPressed: () { Navigator.pop(context, "OK"); }
body: new ButtonTheme(
color: ButtonColor.accent,
child: new Padding(
padding: const EdgeDims.all(24.0),
child: new ScrollableViewport(
child: new Column(
alignItems: FlexAlignItems.stretch,
children: <Widget>[
new Container(
child: new Text(
_introText,
style: dialogTextStyle
),
padding: const EdgeDims.only(top: 8.0, bottom: 24.0),
margin: const EdgeDims.only(bottom:16.0),
decoration: new BoxDecoration(
border: new Border(bottom: new BorderSide(color: theme.dividerColor))
)
),
new FlatButton(
child: new Text('Alert without a title'),
onPressed: () {
showDemoDialog(
context: context,
dialog: new Dialog(
content: new Text(
_alertWithoutTitleText,
style: dialogTextStyle
),
actions: <Widget>[
new FlatButton(
child: new Text('CANCEL'),
onPressed: () { Navigator.pop(context, DialogDemoAction.cancel); }
),
new FlatButton(
child: new Text('DISCARD'),
onPressed: () { Navigator.pop(context, DialogDemoAction.discard); }
)
]
)
);
}
),
new FlatButton(
child: new Text('Alert with a title'),
onPressed: () {
showDemoDialog(
context: context,
dialog: new Dialog(
title: new Text("Use Google's location service?"),
content: new Text(
_alertWithTitleText,
style: dialogTextStyle
),
actions: <Widget>[
new FlatButton(
child: new Text('DISAGREE'),
onPressed: () { Navigator.pop(context, DialogDemoAction.disagree); }
),
new FlatButton(
child: new Text('AGREE'),
onPressed: () { Navigator.pop(context, DialogDemoAction.agree); }
)
]
)
);
}
),
new FlatButton(
child: new Text('Simple Dialog'),
onPressed: () {
showDemoDialog(
context: context,
dialog: new Dialog(
title: new Text('Set backup account'),
content: new Column(
children: <Widget>[
new DialogDemoItem(
icon: 'action/account_circle',
color: theme.primaryColor,
text: 'username@gmail.com',
onPressed: () { Navigator.pop(context, 'username@gmail.com'); }
),
new DialogDemoItem(
icon: 'action/account_circle',
color: theme.primaryColor,
text: 'user02@gmail.com',
onPressed: () { Navigator.pop(context, 'user02@gmail.com'); }
),
new DialogDemoItem(
icon: 'content/add_circle',
text: 'add account',
color: theme.disabledColor
)
]
)
)
);
}
),
new FlatButton(
child: new Text('Confirmation Dialog'),
onPressed: () {
showTimePicker(
context: context,
initialTime: const TimeOfDay(hour: 15, minute: 30)
)
.then((value) { // The value passed to Navigator.pop() or null.
if (value != null) {
scaffoldKey.currentState.showSnackBar(new SnackBar(
content: new Text('You selected: $value')
));
}
});
}
),
new FlatButton(
child: new Text('Fullscreen Dialog'),
onPressed: () {
Navigator.push(context, new MaterialPageRoute(
builder: (BuildContext context) => new FullScreenDialogDemo()
));
}
)
]
)
)
)
]
)
);
}
}
examples/material_gallery/lib/demo/full_screen_dialog_demo.dart 0 → 100644
View file @ 738fa84b
// 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:intl/intl.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
// This demo is based on
// https://www.google.com/design/spec/components/dialogs.html#dialogs-full-screen-dialogs
enum DismissDialogAction {
cancel,
discard,
save,
}
class DateTimeItem extends StatelessComponent {
DateTimeItem({ Key key, DateTime dateTime, this.onChanged })
: date = new DateTime(dateTime.year, dateTime.month, dateTime.day),
time = new TimeOfDay(hour: dateTime.hour, minute: dateTime.minute),
super(key: key) {
assert(onChanged != null);
}
final DateTime date;
final TimeOfDay time;
final ValueChanged<DateTime> onChanged;
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
return new DefaultTextStyle(
style: theme.text.subhead,
child: new Row(
children: <Widget>[
new Flexible(
child: new Container(
padding: const EdgeDims.symmetric(vertical: 8.0),
decoration: new BoxDecoration(
border: new Border(bottom: new BorderSide(color: theme.dividerColor))
),
child: new InkWell(
onTap: () {
showDatePicker(
context: context,
initialDate: date,
firstDate: date.subtract(const Duration(days: 30)),
lastDate: date.add(const Duration(days: 30))
)
.then((DateTime value) {
onChanged(new DateTime(value.year, value.month, value.day, time.hour, time.minute));
});
},
child: new Row(
justifyContent: FlexJustifyContent.spaceBetween,
children: <Widget>[
new Text(new DateFormat('EEE, MMM d yyyy').format(date)),
new Icon(icon: 'navigation/arrow_drop_down', size: IconSize.s24, color: Colors.black54),
]
)
)
)
),
new Container(
margin: const EdgeDims.only(left: 8.0),
padding: const EdgeDims.symmetric(vertical: 8.0),
decoration: new BoxDecoration(
border: new Border(bottom: new BorderSide(color: theme.dividerColor))
),
child: new InkWell(
onTap: () {
showTimePicker(
context: context,
initialTime: time
)
.then((TimeOfDay value) {
onChanged(new DateTime(date.year, date.month, date.day, value.hour, value.minute));
});
},
child: new Row(
children: <Widget>[
new Text('$time'),
new Icon(icon: 'navigation/arrow_drop_down', size: IconSize.s24, color: Colors.black54),
]
)
)
)
]
)
);
}
}
class FullScreenDialogDemo extends StatefulComponent {
FullScreenDialogDemoState createState() => new FullScreenDialogDemoState();
}
class FullScreenDialogDemoState extends State<FullScreenDialogDemo> {
DateTime fromDateTime = new DateTime.now();
DateTime toDateTime = new DateTime.now();
bool allDayValue = false;
bool saveNeeded = false;
void handleDismissButton(BuildContext context) {
if (!saveNeeded) {
Navigator.pop(context, null);
return;
}
final ThemeData theme = Theme.of(context);
final TextStyle dialogTextStyle = theme.text.subhead.copyWith(color: theme.text.caption.color);
showDialog(
context: context,
child: new Dialog(
content: new Text(
'Discard new event?',
style: dialogTextStyle
),
actions: <Widget>[
new FlatButton(
child: new Text('CANCEL'),
onPressed: () { Navigator.pop(context, DismissDialogAction.cancel); }
),
new FlatButton(
child: new Text('DISCARD'),
onPressed: () {
Navigator.openTransaction(context, (NavigatorTransaction transaction) {
transaction.pop(DismissDialogAction.discard); // pop the cancel/discard dialog
transaction.pop(null); // pop this route
});
}
)
]
)
);
}
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
return new Scaffold(
toolBar: new ToolBar(
left: new IconButton(
icon: 'content/clear',
onPressed: () { handleDismissButton(context); }
),
center: new Text('New Event'),
right: <Widget> [
new FlatButton(
child: new Text('SAVE', style: theme.text.body1.copyWith(color: Colors.white)),
onPressed: () {
Navigator.pop(context, DismissDialogAction.save);
}
)
]
),
body: new Padding(
padding: const EdgeDims.all(16.0),
child: new ScrollableViewport(
child: new Column(
alignItems: FlexAlignItems.stretch,
justifyContent: FlexJustifyContent.collapse,
children: <Widget>[
new Container(
padding: const EdgeDims.symmetric(vertical: 8.0),
decoration: new BoxDecoration(
border: new Border(bottom: new BorderSide(color: theme.dividerColor))
),
child: new Align(
alignment: const FractionalOffset(0.0, 1.0),
child: new Text('Event name', style: theme.text.display2)
)
),
new Container(
padding: const EdgeDims.symmetric(vertical: 8.0),
decoration: new BoxDecoration(
border: new Border(bottom: new BorderSide(color: theme.dividerColor))
),
child: new Align(
alignment: const FractionalOffset(0.0, 1.0),
child: new Text('Location', style: theme.text.title.copyWith(color: Colors.black54))
)
),
new Column(
alignItems: FlexAlignItems.stretch,
justifyContent: FlexJustifyContent.end,
children: <Widget>[
new Text('From', style: theme.text.caption),
new DateTimeItem(
dateTime: fromDateTime,
onChanged: (DateTime value) {
setState(() {
fromDateTime = value;
saveNeeded = true;
});
}
)
]
),
new Column(
alignItems: FlexAlignItems.stretch,
justifyContent: FlexJustifyContent.end,
children: <Widget>[
new Text('To', style: theme.text.caption),
new DateTimeItem(
dateTime: toDateTime,
onChanged: (DateTime value) {
setState(() {
toDateTime = value;
saveNeeded = true;
});
}
)
]
),
new Container(
decoration: new BoxDecoration(
border: new Border(bottom: new BorderSide(color: theme.dividerColor))
),
child: new Row(
children: <Widget> [
new Checkbox(
value: allDayValue,
onChanged: (bool value) {
setState(() {
allDayValue = value;
saveNeeded = true;
});
}
),
new Text('All-day')
]
)
)
]
.map((Widget child) {
return new Container(
padding: const EdgeDims.symmetric(vertical: 8.0),
height: 96.0,
child: child
);
})
.toList()
)
)
)
);
}
}
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

HIAST - GitLab