Add landscape time picker (#6173)

Fixes #988

packages/flutter/lib/material.dart

@@ -73,7 +73,6 @@ export 'src/material/tabs.dart';
 export 'src/material/theme.dart';
 export 'src/material/theme_data.dart';
 export 'src/material/time_picker.dart';
-export 'src/material/time_picker_dialog.dart';
 export 'src/material/toggleable.dart';
 export 'src/material/tooltip.dart';
 export 'src/material/two_level_list.dart';

packages/flutter/lib/src/material/date_picker.dart

@@ -94,8 +94,8 @@ class _DatePickerHeader extends StatelessWidget {
         break;
     }
 
-    double height;
     double width;
+    double height;
     EdgeInsets padding;
     MainAxisAlignment mainAxisAlignment;
     switch (orientation) {
@@ -604,7 +604,6 @@ class _DatePickerDialogState extends State<_DatePickerDialog> {
     );
     Widget actions = new ButtonTheme.bar(
       child: new ButtonBar(
-        alignment: MainAxisAlignment.end,
         children: <Widget>[
           new FlatButton(
             child: new Text('CANCEL'),
@@ -646,12 +645,15 @@ class _DatePickerDialogState extends State<_DatePickerDialog> {
                   crossAxisAlignment: CrossAxisAlignment.stretch,
                   children: <Widget>[
                     header,
-                    new SizedBox(
-                      width: _kMonthPickerLandscapeWidth,
-                      child: new Column(
-                        mainAxisSize: MainAxisSize.min,
-                        crossAxisAlignment: CrossAxisAlignment.stretch,
-                        children: <Widget>[picker, actions]
+                    new Flexible(
+                      fit: FlexFit.loose,
+                      child: new SizedBox(
+                        width: _kMonthPickerLandscapeWidth,
+                        child: new Column(
+                          mainAxisSize: MainAxisSize.min,
+                          crossAxisAlignment: CrossAxisAlignment.stretch,
+                          children: <Widget>[picker, actions]
+                        )
                       )
                     )
                   ]

packages/flutter/lib/src/material/dialog.dart

@@ -166,7 +166,6 @@ class AlertDialog extends StatelessWidget {
     if (actions != null) {
       children.add(new ButtonTheme.bar(
         child: new ButtonBar(
-          alignment: MainAxisAlignment.end,
           children: actions
         )
       ));

packages/flutter/lib/src/material/time_picker_dialog.dart

-// 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 'time_picker.dart';
-import 'flat_button.dart';
-
-class _TimePickerDialog extends StatefulWidget {
-  _TimePickerDialog({
-    Key key,
-    this.initialTime
-  }) : super(key: key);
-
-  final TimeOfDay initialTime;
-
-  @override
-  _TimePickerDialogState createState() => new _TimePickerDialogState();
-}
-
-class _TimePickerDialogState extends State<_TimePickerDialog> {
-  @override
-  void initState() {
-    super.initState();
-    _selectedTime = config.initialTime;
-  }
-
-  TimeOfDay _selectedTime;
-
-  void _handleTimeChanged(TimeOfDay value) {
-    setState(() {
-      _selectedTime = value;
-    });
-  }
-
-  void _handleCancel() {
-    Navigator.pop(context);
-  }
-
-  void _handleOk() {
-    Navigator.pop(context, _selectedTime);
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    // TODO(abarth): Use Dialog directly.
-    return new AlertDialog(
-      content: new TimePicker(
-        selectedTime: _selectedTime,
-        onChanged: _handleTimeChanged
-      ),
-      contentPadding: EdgeInsets.zero,
-      actions: <Widget>[
-        new FlatButton(
-          child: new Text('CANCEL'),
-          onPressed: _handleCancel
-        ),
-        new FlatButton(
-          child: new Text('OK'),
-          onPressed: _handleOk
-        ),
-      ]
-    );
-  }
-}
-
-/// Shows a dialog containing a material design time picker.
-///
-/// The returned Future resolves to the time selected by the user when the user
-/// closes the dialog. If the user cancels the dialog, the Future resolves to
-/// the [initialTime].
-///
-/// To show a dialog with [initialTime] equal to the current time:
-/// ```dart
-/// final DateTime now = new DateTime.now();
-/// showTimePicker(
-///   initialTime: new TimeOfDay(hour: now.hour, minute: now.minute),
-///   context: context
-/// );
-/// ```
-///
-/// See also:
-///
-///  * [TimePicker]
-///  * [showDatePicker]
-///  * <https://www.google.com/design/spec/components/pickers.html#pickers-time-pickers>
-Future<TimeOfDay> showTimePicker({
-  BuildContext context,
-  TimeOfDay initialTime
-}) async {
-  return await showDialog(
-    context: context,
-    child: new _TimePickerDialog(initialTime: initialTime)
-  ) ?? initialTime;
-}

packages/flutter/test/material/time_picker_test.dart

@@ -5,100 +5,82 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
-void main() {
-  testWidgets('tap-select an hour', (WidgetTester tester) async {
-    Key _timePickerKey = new UniqueKey();
-    TimeOfDay _selectedTime = const TimeOfDay(hour: 7, minute: 0);
-
-    await tester.pumpWidget(
-      new StatefulBuilder(
-        builder: (BuildContext context, StateSetter setState) {
-          return new Material(
-            child: new Center(
-              child: new SizedBox(
-                width: 200.0,
-                height: 400.0,
-                child: new TimePicker(
-                  key: _timePickerKey,
-                  selectedTime: _selectedTime,
-                  onChanged: (TimeOfDay value) {
-                    setState(() {
-                      _selectedTime = value;
-                    });
-                  }
-                )
-              )
-            )
-          );
-        }
+class _TimePickerLauncher extends StatelessWidget {
+  _TimePickerLauncher({ Key key, this.onChanged }) : super(key: key);
+
+  final ValueChanged<TimeOfDay> onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return new MaterialApp(
+      home: new Material(
+        child: new Center(
+          child: new Builder(
+            builder: (BuildContext context) {
+              return new RaisedButton(
+                child: new Text('X'),
+                onPressed: () async {
+                  onChanged(await showTimePicker(
+                    context: context,
+                    initialTime: const TimeOfDay(hour: 7, minute: 0)
+                  ));
+                }
+              );
+            }
+          )
+        )
       )
     );
+  }
+}
 
-    Point center = tester.getCenter(find.byKey(_timePickerKey));
+Future<Point> startPicker(WidgetTester tester, ValueChanged<TimeOfDay> onChanged) async {
+  await tester.pumpWidget(new _TimePickerLauncher(onChanged: onChanged));
+  await tester.tap(find.text('X'));
 
-    Point hour0 = new Point(center.x, center.y - 50.0); // 12:00 AM
-    await tester.tapAt(hour0);
-    expect(_selectedTime.hour, equals(0));
+  await tester.pump(); // start animation
+  await tester.pump(const Duration(seconds: 1));
 
-    Point hour3 = new Point(center.x + 50.0, center.y);
-    await tester.tapAt(hour3);
-    expect(_selectedTime.hour, equals(3));
-
-    Point hour6 = new Point(center.x, center.y + 50.0);
-    await tester.tapAt(hour6);
-    expect(_selectedTime.hour, equals(6));
+  return tester.getCenter(find.byKey(new Key('time-picker-dial')));
+}
 
-    Point hour9 = new Point(center.x - 50.0, center.y);
-    await tester.tapAt(hour9);
-    expect(_selectedTime.hour, equals(9));
+Future<Null> finishPicker(WidgetTester tester) async {
+  await tester.tap(find.text('OK'));
 
-    await tester.pump(const Duration(seconds: 1)); // Finish gesture animation.
-    await tester.pump(const Duration(seconds: 1)); // Finish settling animation.
-  });
+  await tester.pump(); // start animation
+  await tester.pump(const Duration(seconds: 1));
+}
 
-  testWidgets('render picker with intrinsic dimensions', (WidgetTester tester) async {
-    await tester.pumpWidget(
-      new IntrinsicWidth(
-        child: new IntrinsicHeight(
-          child: new TimePicker(
-            onChanged: null,
-            selectedTime: new TimeOfDay(hour: 0, minute: 0)
-          )
-        )
-      )
-    );
-    await tester.pump(const Duration(seconds: 5));
+void main() {
+  testWidgets('tap-select an hour', (WidgetTester tester) async {
+    TimeOfDay result;
+
+    Point center = await startPicker(tester, (TimeOfDay time) { result = time; });
+    await tester.tapAt(new Point(center.x, center.y - 50.0)); // 12:00 AM
+    await finishPicker(tester);
+    expect(result, equals(const TimeOfDay(hour: 0, minute: 0)));
+
+    center = await startPicker(tester, (TimeOfDay time) { result = time; });
+    await tester.tapAt(new Point(center.x + 50.0, center.y));
+    await finishPicker(tester);
+    expect(result, equals(const TimeOfDay(hour: 3, minute: 0)));
+
+    center = await startPicker(tester, (TimeOfDay time) { result = time; });
+    await tester.tapAt(new Point(center.x, center.y + 50.0));
+    await finishPicker(tester);
+    expect(result, equals(const TimeOfDay(hour: 6, minute: 0)));
+
+    center = await startPicker(tester, (TimeOfDay time) { result = time; });
+    await tester.tapAt(new Point(center.x, center.y + 50.0));
+    await tester.tapAt(new Point(center.x - 50, center.y));
+    await finishPicker(tester);
+    expect(result, equals(const TimeOfDay(hour: 9, minute: 0)));
   });
 
   testWidgets('drag-select an hour', (WidgetTester tester) async {
-    Key _timePickerKey = new UniqueKey();
-    TimeOfDay _selectedTime = const TimeOfDay(hour: 7, minute: 0);
-
-    await tester.pumpWidget(
-      new StatefulBuilder(
-        builder: (BuildContext context, StateSetter setState) {
-          return new Material(
-            child: new Center(
-                child: new SizedBox(
-                width: 200.0,
-                height: 400.0,
-                child: new TimePicker(
-                  key: _timePickerKey,
-                  selectedTime: _selectedTime,
-                  onChanged: (TimeOfDay value) {
-                    setState(() {
-                      _selectedTime = value;
-                    });
-                  }
-                )
-              )
-            )
-          );
-        }
-      )
-    );
+    TimeOfDay result;
 
-    Point center = tester.getCenter(find.byKey(_timePickerKey));
+    Point center = await startPicker(tester, (TimeOfDay time) { result = time; });
     Point hour0 = new Point(center.x, center.y - 50.0); // 12:00 AM
     Point hour3 = new Point(center.x + 50.0, center.y);
     Point hour6 = new Point(center.x, center.y + 50.0);
@@ -109,29 +91,28 @@ void main() {
     gesture = await tester.startGesture(hour3);
     await gesture.moveBy(hour0 - hour3);
     await gesture.up();
-    expect(_selectedTime.hour, equals(0));
-    await tester.pump(const Duration(seconds: 1)); // Finish gesture animation.
-    await tester.pump(const Duration(seconds: 1)); // Finish settling animation.
+    await finishPicker(tester);
+    expect(result.hour, 0);
 
+    expect(await startPicker(tester, (TimeOfDay time) { result = time; }), equals(center));
     gesture = await tester.startGesture(hour0);
     await gesture.moveBy(hour3 - hour0);
     await gesture.up();
-    expect(_selectedTime.hour, equals(3));
-    await tester.pump(const Duration(seconds: 1));
-    await tester.pump(const Duration(seconds: 1));
+    await finishPicker(tester);
+    expect(result.hour, 3);
 
+    expect(await startPicker(tester, (TimeOfDay time) { result = time; }), equals(center));
     gesture = await tester.startGesture(hour3);
     await gesture.moveBy(hour6 - hour3);
     await gesture.up();
-    expect(_selectedTime.hour, equals(6));
-    await tester.pump(const Duration(seconds: 1));
-    await tester.pump(const Duration(seconds: 1));
+    await finishPicker(tester);
+    expect(result.hour, equals(6));
 
+    expect(await startPicker(tester, (TimeOfDay time) { result = time; }), equals(center));
     gesture = await tester.startGesture(hour6);
     await gesture.moveBy(hour9 - hour6);
     await gesture.up();
-    expect(_selectedTime.hour, equals(9));
-    await tester.pump(const Duration(seconds: 1));
-    await tester.pump(const Duration(seconds: 1));
+    await finishPicker(tester);
+    expect(result.hour, equals(9));
   });
 }