Skip to content

F
Front-End
Commit 66d85527 authored by Hans Muller's avatar Hans Muller
Browse files
Options

gallery dialog demos

parent 8b122987
Hide whitespace changes
Inline Side-by-side
Showing with 469 additions and 30 deletions
examples/material_gallery/flutter.yaml
View file @ 66d85527
...@@ -19,6 +19,7 @@ assets: ...@@ -19,6 +19,7 @@ assets:
- packages/flutter_gallery_assets/icon-rain.png - packages/flutter_gallery_assets/icon-rain.png
- packages/flutter_gallery_assets/icon-snow.png - packages/flutter_gallery_assets/icon-snow.png
material-design-icons: material-design-icons:
- name: action/account_circle
- name: action/alarm - name: action/alarm
- name: action/android - name: action/android
- name: action/event - name: action/event
...@@ -31,6 +32,8 @@ material-design-icons: ...@@ -31,6 +32,8 @@ material-design-icons:
- name: communication/location_on - name: communication/location_on
- name: communication/message - name: communication/message
- name: content/add - name: content/add
- name: content/add_circle
- name: content/clear
- name: content/create - name: content/create
- name: image/brightness_5 - name: image/brightness_5
- name: image/brightness_7 - name: image/brightness_7
......
examples/material_gallery/lib/demo/buttons_demo.dart
View file @ 66d85527
...@@ -79,7 +79,9 @@ class _ButtonsDemoState extends State<ButtonsDemo> { ...@@ -79,7 +79,9 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
child: new FloatingActionButton( child: new FloatingActionButton(
child: new Icon(icon: 'content/add'), child: new Icon(icon: 'content/add'),
onPressed: () { 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> { ...@@ -94,7 +96,9 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
new RaisedButton( new RaisedButton(
child: new Text("Launch Demo"), child: new Text("Launch Demo"),
onPressed: () { onPressed: () {
Navigator.push(context, new MaterialPageRoute(builder: (_) => new SnackBarDemo())); Navigator.push(context, new MaterialPageRoute(
builder: (BuildContext context) => new SnackBarDemo()
));
} }
), ),
new RaisedButton( new RaisedButton(
...@@ -122,13 +126,9 @@ class _ButtonsDemoState extends State<ButtonsDemo> { ...@@ -122,13 +126,9 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
new FlatButton( new FlatButton(
child: new Text("Launch Demo"), child: new Text("Launch Demo"),
onPressed: () { onPressed: () {
showDialog(context: context, child: new DialogDemo()).then((String value) { Navigator.push(context, new MaterialPageRoute(
if (value != null) { builder: (_) => new DialogDemo()
Scaffold.of(context).showSnackBar(new SnackBar( ));
content: new Text('You dismissed the dialog with "$value"')
));
}
});
} }
), ),
new FlatButton( new FlatButton(
......
examples/material_gallery/lib/demo/dialog_demo.dart
View file @ 66d85527
...@@ -5,33 +5,218 @@ ...@@ -5,33 +5,218 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
const String _dialogText = import 'full_screen_dialog_demo.dart';
"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.";
class DialogDemo extends StatelessComponent { enum DialogDemoAction {
DialogDemo({ Key key }) : super(key: key); 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) { Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context); final ThemeData theme = Theme.of(context);
return new Dialog( final TextStyle dialogTextStyle = theme.text.subhead.copyWith(color: theme.text.caption.color);
title: new Text("This is a Dialog"),
content: new Text( return new Scaffold(
_dialogText, key: scaffoldKey,
style: theme.text.subhead.copyWith(color: theme.text.caption.color) toolBar: new ToolBar(
center: new Text('Dialogs')
), ),
actions: <Widget>[ body: new ButtonTheme(
new FlatButton( color: ButtonColor.accent,
child: new Text("CANCEL"), child: new Padding(
onPressed: () { Navigator.pop(context, "CANCEL"); } padding: const EdgeDims.all(24.0),
), child: new ScrollableViewport(
new FlatButton( child: new Column(
child: new Text("OK"), alignItems: FlexAlignItems.stretch,
onPressed: () { Navigator.pop(context, "OK"); } 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 @ 66d85527
// 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