Commit 8ec4f229 authored by Adam Barth's avatar Adam Barth Committed by GitHub

Add landscape time picker (#6173)

Fixes #988
parent 66127250
......@@ -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';
......
......@@ -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]
)
)
)
]
......
......@@ -166,7 +166,6 @@ class AlertDialog extends StatelessWidget {
if (actions != null) {
children.add(new ButtonTheme.bar(
child: new ButtonBar(
alignment: MainAxisAlignment.end,
children: actions
)
));
......
// 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;
}
......@@ -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));
});
}
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