Merge pull request #557 from abarth/picker_demo

Integrate Date Picker into material_gallery

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<MeasurementDateDialog> {
-  @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: <Widget>[
-        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<MeasurementFragment> {
   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;
       });

examples/material_gallery/flutter.yaml

@@ -1,3 +1,4 @@
 name: material_gallery
 material-design-icons:
   - name: navigation/cancel
+  - name: navigation/menu

examples/material_gallery/lib/chip_demo.dart

@@ -50,6 +50,6 @@ class _ChipDemoState extends State<ChipDemo> {
 
 final WidgetDemo kChipDemo = new WidgetDemo(
   title: 'Chips',
-  route: '/',
+  routeName: '/chips',
   builder: (_) => new ChipDemo()
 );

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<DatePickerDemo> {
+  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()
+);

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<WidgetDemo> demos;
+  final WidgetDemo active;
+
+  void _showDrawer(BuildContext context) {
+    List<Widget> items = <Widget>[
+      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)
     );
   }
 }

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<WidgetDemo> _kDemos = <WidgetDemo>[
-  kChipDemo
+  kChipDemo,
+  kDatePickerDemo,
 ];
 
 void main() {
   Map<String, RouteBuilder> routes = new Map<String, RouteBuilder>();
+  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',

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;
 }

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

examples/widgets/date_picker.dart

@@ -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<DatePickerDemo> {
-  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(<Widget>[
-        new Scaffold(
-          toolBar: new ToolBar(center: new Text("Date Picker")),
-          body: new Row(
-            <Widget>[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: <Widget>[
-            new FlatButton(
-              child: new Text('CANCEL')
-            ),
-            new FlatButton(
-              child: new Text('OK')
-            ),
-          ]
-        )
-      ])
-    );
-  }
-}

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';

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: <Widget>[
+        new FlatButton(
+          child: new Text('CANCEL'),
+          onPressed: _handleCancel
+        ),
+        new FlatButton(
+          child: new Text('OK'),
+          onPressed: _handleOk
+        ),
+      ]
+    );
+  }
+}
+
+Future<DateTime> 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;
+}