From b17fe3afb2195fa9b2c604d9495b7609b41fa135 Mon Sep 17 00:00:00 2001 From: Adam Barth Date: Mon, 23 Nov 2015 15:20:23 -0800 Subject: [PATCH] Integrate Date Picker into material_gallery --- examples/fitness/lib/measurement.dart | 57 ++---------- examples/material_gallery/flutter.yaml | 1 + examples/material_gallery/lib/chip_demo.dart | 2 +- .../lib/date_picker_demo.dart | 48 ++++++++++ .../material_gallery/lib/gallery_page.dart | 42 ++++++++- examples/material_gallery/lib/main.dart | 8 +- .../material_gallery/lib/widget_demo.dart | 4 +- examples/material_gallery/pubspec.yaml | 2 + examples/widgets/date_picker.dart | 63 ------------- packages/flutter/lib/material.dart | 1 + .../lib/src/material/date_picker_dialog.dart | 88 +++++++++++++++++++ 11 files changed, 192 insertions(+), 124 deletions(-) create mode 100644 examples/material_gallery/lib/date_picker_demo.dart delete mode 100644 examples/widgets/date_picker.dart create mode 100644 packages/flutter/lib/src/material/date_picker_dialog.dart diff --git a/examples/fitness/lib/measurement.dart b/examples/fitness/lib/measurement.dart index 72ffbb93704..bac3e1c48b4 100644 --- a/examples/fitness/lib/measurement.dart +++ b/examples/fitness/lib/measurement.dart @@ -54,55 +54,6 @@ class MeasurementRow extends FitnessItemRow { } } -class MeasurementDateDialog extends StatefulComponent { - MeasurementDateDialog({ this.previousDate }); - - final DateTime previousDate; - - MeasurementDateDialogState createState() => new MeasurementDateDialogState(); -} - -class MeasurementDateDialogState extends State { - @override - void initState() { - _selectedDate = config.previousDate; - } - - DateTime _selectedDate; - - void _handleDateChanged(DateTime value) { - setState(() { - _selectedDate = value; - }); - } - - Widget build(BuildContext context) { - return new Dialog( - content: new DatePicker( - selectedDate: _selectedDate, - firstDate: new DateTime(2015, 8), - lastDate: new DateTime(2101), - onChanged: _handleDateChanged - ), - contentPadding: EdgeDims.zero, - actions: [ - new FlatButton( - child: new Text('CANCEL'), - onPressed: () { - Navigator.of(context).pop(); - } - ), - new FlatButton( - child: new Text('OK'), - onPressed: () { - Navigator.of(context).pop(_selectedDate); - } - ), - ] - ); - } -} - class MeasurementFragment extends StatefulComponent { MeasurementFragment({ this.onCreated }); @@ -154,11 +105,13 @@ class MeasurementFragmentState extends State { static final GlobalKey weightKey = new GlobalKey(); Future _handleDatePressed() async { - DateTime value = await showDialog( + DateTime value = await showDatePicker( context: context, - child: new MeasurementDateDialog(previousDate: _when) + initialDate: _when, + firstDate: new DateTime(2015, 8), + lastDate: new DateTime(2101) ); - if (value != null) { + if (value != _when) { setState(() { _when = value; }); diff --git a/examples/material_gallery/flutter.yaml b/examples/material_gallery/flutter.yaml index d4888d9c762..444f9f8c5e9 100644 --- a/examples/material_gallery/flutter.yaml +++ b/examples/material_gallery/flutter.yaml @@ -1,3 +1,4 @@ name: material_gallery material-design-icons: - name: navigation/cancel + - name: navigation/menu diff --git a/examples/material_gallery/lib/chip_demo.dart b/examples/material_gallery/lib/chip_demo.dart index 66ee104e7be..fbe209ae5e6 100644 --- a/examples/material_gallery/lib/chip_demo.dart +++ b/examples/material_gallery/lib/chip_demo.dart @@ -50,6 +50,6 @@ class _ChipDemoState extends State { final WidgetDemo kChipDemo = new WidgetDemo( title: 'Chips', - route: '/', + routeName: '/chips', builder: (_) => new ChipDemo() ); diff --git a/examples/material_gallery/lib/date_picker_demo.dart b/examples/material_gallery/lib/date_picker_demo.dart new file mode 100644 index 00000000000..034f22c57e0 --- /dev/null +++ b/examples/material_gallery/lib/date_picker_demo.dart @@ -0,0 +1,48 @@ +// Copyright 2015 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 'dart:async'; + +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; + +import 'widget_demo.dart'; + +class DatePickerDemo extends StatefulComponent { + _DatePickerDemoState createState() => new _DatePickerDemoState(); +} + +class _DatePickerDemoState extends State { + DateTime _selectedDate = new DateTime.now(); + + Future _handleSelectDate() async { + DateTime picked = await showDatePicker( + context: context, + initialDate: _selectedDate, + firstDate: new DateTime(2015, 8), + lastDate: new DateTime(2101) + ); + if (picked != _selectedDate) { + setState(() { + _selectedDate = picked; + }); + } + } + + Widget build(BuildContext context) { + return new Column([ + new Text(new DateFormat.yMMMd().format(_selectedDate)), + new RaisedButton( + onPressed: _handleSelectDate, + child: new Text('SELECT DATE') + ), + ], justifyContent: FlexJustifyContent.center); + } +} + +final WidgetDemo kDatePickerDemo = new WidgetDemo( + title: 'Date Picker', + routeName: '/date-picker', + builder: (_) => new DatePickerDemo() +); diff --git a/examples/material_gallery/lib/gallery_page.dart b/examples/material_gallery/lib/gallery_page.dart index 6353ad7bc87..8caaddd9345 100644 --- a/examples/material_gallery/lib/gallery_page.dart +++ b/examples/material_gallery/lib/gallery_page.dart @@ -7,14 +7,48 @@ import 'package:flutter/material.dart'; import 'widget_demo.dart'; class GalleryPage extends StatelessComponent { - GalleryPage({ this.demo }); + GalleryPage({ this.demos, this.active }); - final WidgetDemo demo; + final List demos; + final WidgetDemo active; + + void _showDrawer(BuildContext context) { + List items = [ + new DrawerHeader(child: new Text('Material demos')), + ]; + + for (WidgetDemo demo in demos) { + items.add(new DrawerItem( + onPressed: () { + Navigator.of(context).pushNamed(demo.routeName); + }, + child: new Text(demo.title) + )); + } + + showDrawer(context: context, child: new Block(items)); + } + + Widget _body(BuildContext context) { + if (active != null) + return active.builder(context); + return new Material( + child: new Center( + child: new Text('Select a demo from the drawer') + ) + ); + } Widget build(BuildContext context) { return new Scaffold( - toolBar: new ToolBar(center: new Text(demo.title)), - body: demo.builder(context) + toolBar: new ToolBar( + left: new IconButton( + icon: 'navigation/menu', + onPressed: () { _showDrawer(context); } + ), + center: new Text(active?.title ?? 'Material gallery') + ), + body: _body(context) ); } } diff --git a/examples/material_gallery/lib/main.dart b/examples/material_gallery/lib/main.dart index 7c1c4b7edf4..ae8bf685086 100644 --- a/examples/material_gallery/lib/main.dart +++ b/examples/material_gallery/lib/main.dart @@ -6,16 +6,20 @@ import 'package:flutter/material.dart'; import 'chip_demo.dart'; import 'gallery_page.dart'; +import 'date_picker_demo.dart'; import 'widget_demo.dart'; final List _kDemos = [ - kChipDemo + kChipDemo, + kDatePickerDemo, ]; void main() { Map routes = new Map(); + routes['/'] = (_) => new GalleryPage(demos: _kDemos); + for (WidgetDemo demo in _kDemos) - routes[demo.route] = (_) => new GalleryPage(demo: demo); + routes[demo.routeName] = (_) => new GalleryPage(demos: _kDemos, active: demo); runApp(new MaterialApp( title: 'Material Gallery', diff --git a/examples/material_gallery/lib/widget_demo.dart b/examples/material_gallery/lib/widget_demo.dart index 5fb53197017..533c520189f 100644 --- a/examples/material_gallery/lib/widget_demo.dart +++ b/examples/material_gallery/lib/widget_demo.dart @@ -5,9 +5,9 @@ import 'package:flutter/material.dart'; class WidgetDemo { - WidgetDemo({ this.title, this.route, this.builder }); + WidgetDemo({ this.title, this.routeName, this.builder }); final String title; - final String route; + final String routeName; final WidgetBuilder builder; } diff --git a/examples/material_gallery/pubspec.yaml b/examples/material_gallery/pubspec.yaml index c358d7b31fd..2e547a22a09 100644 --- a/examples/material_gallery/pubspec.yaml +++ b/examples/material_gallery/pubspec.yaml @@ -1,4 +1,6 @@ name: material_gallery dependencies: + intl: '>=0.12.4+2 <0.13.0' + flutter: path: ../../packages/flutter diff --git a/examples/widgets/date_picker.dart b/examples/widgets/date_picker.dart deleted file mode 100644 index b5709d18bcb..00000000000 --- a/examples/widgets/date_picker.dart +++ /dev/null @@ -1,63 +0,0 @@ -// Copyright 2015 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'; - -void main() => runApp(new DatePickerDemo()); - -class DatePickerDemo extends StatefulComponent { - DatePickerDemoState createState() => new DatePickerDemoState(); -} - -class DatePickerDemoState extends State { - void initState() { - super.initState(); - DateTime now = new DateTime.now(); - _dateTime = new DateTime(now.year, now.month, now.day); - } - - DateTime _dateTime; - - void _handleDateChanged(DateTime dateTime) { - setState(() { - _dateTime = dateTime; - }); - } - - Widget build(BuildContext context) { - return new Theme( - data: new ThemeData( - brightness: ThemeBrightness.light, - primarySwatch: Colors.teal - ), - child: new Stack([ - new Scaffold( - toolBar: new ToolBar(center: new Text("Date Picker")), - body: new Row( - [new Text(_dateTime.toString())], - alignItems: FlexAlignItems.end, - justifyContent: FlexJustifyContent.center - ) - ), - new Dialog( - content: new DatePicker( - selectedDate: _dateTime, - firstDate: new DateTime(2015, 8), - lastDate: new DateTime(2101), - onChanged: _handleDateChanged - ), - contentPadding: EdgeDims.zero, - actions: [ - new FlatButton( - child: new Text('CANCEL') - ), - new FlatButton( - child: new Text('OK') - ), - ] - ) - ]) - ); - } -} diff --git a/packages/flutter/lib/material.dart b/packages/flutter/lib/material.dart index fbfc79c6323..6e846051ac4 100644 --- a/packages/flutter/lib/material.dart +++ b/packages/flutter/lib/material.dart @@ -15,6 +15,7 @@ export 'src/material/circle_avatar.dart'; export 'src/material/colors.dart'; export 'src/material/constants.dart'; export 'src/material/date_picker.dart'; +export 'src/material/date_picker_dialog.dart'; export 'src/material/dialog.dart'; export 'src/material/drawer.dart'; export 'src/material/drawer_divider.dart'; diff --git a/packages/flutter/lib/src/material/date_picker_dialog.dart b/packages/flutter/lib/src/material/date_picker_dialog.dart new file mode 100644 index 00000000000..268770e5f6e --- /dev/null +++ b/packages/flutter/lib/src/material/date_picker_dialog.dart @@ -0,0 +1,88 @@ +// Copyright 2015 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 'dart:async'; + +import 'package:flutter/widgets.dart'; + +import 'dialog.dart'; +import 'date_picker.dart'; +import 'flat_button.dart'; + +class _DatePickerDialog extends StatefulComponent { + _DatePickerDialog({ + Key key, + this.initialDate, + this.firstDate, + this.lastDate + }) : super(key: key); + + final DateTime initialDate; + final DateTime firstDate; + final DateTime lastDate; + + _DatePickerDialogState createState() => new _DatePickerDialogState(); +} + +class _DatePickerDialogState extends State<_DatePickerDialog> { + void initState() { + super.initState(); + _selectedDate = config.initialDate; + } + + DateTime _selectedDate; + + void _handleDateChanged(DateTime value) { + setState(() { + _selectedDate = value; + }); + } + + void _handleCancel() { + Navigator.of(context).pop(); + } + + void _handleOk() { + Navigator.of(context).pop(_selectedDate); + } + + Widget build(BuildContext context) { + return new Dialog( + content: new DatePicker( + selectedDate: _selectedDate, + firstDate: config.firstDate, + lastDate: config.lastDate, + onChanged: _handleDateChanged + ), + contentPadding: EdgeDims.zero, + actions: [ + new FlatButton( + child: new Text('CANCEL'), + onPressed: _handleCancel + ), + new FlatButton( + child: new Text('OK'), + onPressed: _handleOk + ), + ] + ); + } +} + +Future showDatePicker({ + BuildContext context, + DateTime initialDate, + DateTime firstDate, + DateTime lastDate +}) async { + DateTime picked = await showDialog( + context: context, + child: new _DatePickerDialog( + initialDate: initialDate, + firstDate: firstDate, + lastDate: lastDate + ) + ); + return picked ?? initialDate; +}