diff --git a/examples/flutter_gallery/lib/demo/all.dart b/examples/flutter_gallery/lib/demo/all.dart index 1629c294f0e..d199ab73de5 100644 --- a/examples/flutter_gallery/lib/demo/all.dart +++ b/examples/flutter_gallery/lib/demo/all.dart @@ -10,7 +10,7 @@ export 'calculator_demo.dart'; export 'chip_demo.dart'; export 'colors_demo.dart'; export 'data_table_demo.dart'; -export 'date_picker_demo.dart'; +export 'date_and_time_picker_demo.dart'; export 'dialog_demo.dart'; export 'expansion_panels_demo.dart'; export 'grid_list_demo.dart'; @@ -32,7 +32,6 @@ export 'snack_bar_demo.dart'; export 'tabs_demo.dart'; export 'tabs_fab_demo.dart'; export 'text_field_demo.dart'; -export 'time_picker_demo.dart'; export 'tooltip_demo.dart'; export 'two_level_list_demo.dart'; export 'typography_demo.dart'; diff --git a/examples/flutter_gallery/lib/demo/date_and_time_picker_demo.dart b/examples/flutter_gallery/lib/demo/date_and_time_picker_demo.dart new file mode 100644 index 00000000000..3358bcf0714 --- /dev/null +++ b/examples/flutter_gallery/lib/demo/date_and_time_picker_demo.dart @@ -0,0 +1,218 @@ +// 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'; + +class _InputDropdown extends StatelessWidget { + _InputDropdown({ + Key key, + this.child, + this.labelText, + this.valueText, + this.valueStyle, + this.onPressed }) : super(key: key); + + final String labelText; + final String valueText; + final TextStyle valueStyle; + final VoidCallback onPressed; + final Widget child; + + @override + Widget build(BuildContext context) { + return new InkWell( + onTap: onPressed, + child: new InputContainer( + labelText: labelText, + style: valueStyle, + child: new Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisSize: MainAxisSize.min, + children: [ + new Text(valueText, style: valueStyle), + new Icon(Icons.arrow_drop_down, + color: Theme.of(context).brightness == Brightness.light ? Colors.grey[700] : Colors.white70 + ), + ], + ), + ), + ); + } +} + +class _DateTimePicker extends StatelessWidget { + _DateTimePicker({ + Key key, + this.labelText, + this.selectedDate, + this.selectedTime, + this.selectDate, + this.selectTime + }) : super(key: key); + + final String labelText; + final DateTime selectedDate; + final TimeOfDay selectedTime; + final ValueChanged selectDate; + final ValueChanged selectTime; + + Future _selectDate(BuildContext context) async { + DateTime picked = await showDatePicker( + context: context, + initialDate: selectedDate, + firstDate: new DateTime(2015, 8), + lastDate: new DateTime(2101) + ); + if (picked != null && picked != selectedDate) + selectDate(picked); + } + + Future _selectTime(BuildContext context) async { + TimeOfDay picked = await showTimePicker( + context: context, + initialTime: selectedTime + ); + if (picked != null && picked != selectedTime) + selectTime(picked); + } + + @override + Widget build(BuildContext context) { + final TextStyle valueStyle = Theme.of(context).textTheme.title; + return new Row( + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + new Flexible( + flex: 4, + child: new _InputDropdown( + labelText: labelText, + valueText: new DateFormat.yMMMd().format(selectedDate), + valueStyle: valueStyle, + onPressed: () { _selectDate(context); }, + ), + ), + new SizedBox(width: 12.0), + new Flexible( + flex: 3, + child: new _InputDropdown( + valueText: selectedTime.toString(), + valueStyle: valueStyle, + onPressed: () { _selectTime(context); }, + ), + ), + ], + ); + } +} + +class DateAndTimePickerDemo extends StatefulWidget { + static const String routeName = '/date-and-time-pickers'; + + @override + _DateAndTimePickerDemoState createState() => new _DateAndTimePickerDemoState(); +} + +class _DateAndTimePickerDemoState extends State { + InputValue _eventName = InputValue.empty; + InputValue _eventLocation = InputValue.empty; + DateTime _fromDate = new DateTime.now(); + TimeOfDay _fromTime = const TimeOfDay(hour: 7, minute: 28); + DateTime _toDate = new DateTime.now(); + TimeOfDay _toTime = const TimeOfDay(hour: 7, minute: 28); + List _allActivities = ['hiking', 'swimming', 'boating', 'fishing']; + String _activity = 'fishing'; + + @override + Widget build(BuildContext context) { + return new Scaffold( + appBar: new AppBar(title: new Text('Date and time pickers')), + body: new ScrollableViewport( + child: new Container( + padding: const EdgeInsets.all(16.0), + alignment: FractionalOffset.topLeft, + child: new DropdownButtonHideUnderline( + child: new Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + new Input( + labelText: 'Event name', + value: _eventName, + style: Theme.of(context).textTheme.display1, + onChanged: (InputValue newValue) { + setState(() { + _eventName = newValue; + }); + }, + ), + new Input( + labelText: 'Location', + value: _eventLocation, + style: Theme.of(context).textTheme.display1.copyWith(fontSize: 20.0), + onChanged: (InputValue newValue) { + setState(() { + _eventLocation = newValue; + }); + }, + ), + new _DateTimePicker( + labelText: 'From', + selectedDate: _fromDate, + selectedTime: _fromTime, + selectDate: (DateTime date) { + setState(() { + _fromDate = date; + }); + }, + selectTime: (TimeOfDay time) { + setState(() { + _fromTime = time; + }); + }, + ), + new _DateTimePicker( + labelText: 'To', + selectedDate: _toDate, + selectedTime: _toTime, + selectDate: (DateTime date) { + setState(() { + _toDate = date; + }); + }, + selectTime: (TimeOfDay time) { + setState(() { + _toTime = time; + }); + }, + ), + new InputContainer( + labelText: 'Activity', + hintText: 'Choose an activity', + isEmpty: _activity == null, + child: new DropdownButton( + value: _activity, + isDense: true, + onChanged: (String newValue) { + setState(() { + _activity = newValue; + }); + }, + items: _allActivities.map((String value) { + return new DropdownMenuItem( + value: value, + child: new Text(value), + ); + }).toList(), + ), + ), + ], + ), + ), + ), + ), + ); + } +} diff --git a/examples/flutter_gallery/lib/demo/date_picker_demo.dart b/examples/flutter_gallery/lib/demo/date_picker_demo.dart deleted file mode 100644 index 2488983f692..00000000000 --- a/examples/flutter_gallery/lib/demo/date_picker_demo.dart +++ /dev/null @@ -1,54 +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 'dart:async'; - -import 'package:flutter/material.dart'; -import 'package:intl/intl.dart'; - -class DatePickerDemo extends StatefulWidget { - static const String routeName = '/date-picker'; - - @override - _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 != null && picked != _selectedDate) { - setState(() { - _selectedDate = picked; - }); - } - } - - @override - Widget build(BuildContext context) { - return - new Scaffold( - appBar: new AppBar(title: new Text('Date picker')), - body: new Center( - child: new Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - new Text(new DateFormat.yMMMd().format(_selectedDate)), - new SizedBox(height: 20.0), - new RaisedButton( - onPressed: _handleSelectDate, - child: new Text('SELECT DATE') - ), - ], - ), - ) - ); - } -} diff --git a/examples/flutter_gallery/lib/demo/time_picker_demo.dart b/examples/flutter_gallery/lib/demo/time_picker_demo.dart deleted file mode 100644 index 0bee826741d..00000000000 --- a/examples/flutter_gallery/lib/demo/time_picker_demo.dart +++ /dev/null @@ -1,50 +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 'dart:async'; - -import 'package:flutter/material.dart'; - -class TimePickerDemo extends StatefulWidget { - static const String routeName = '/time-picker'; - - @override - _TimePickerDemoState createState() => new _TimePickerDemoState(); -} - -class _TimePickerDemoState extends State { - TimeOfDay _selectedTime = const TimeOfDay(hour: 7, minute: 28); - - Future _handleSelectTime() async { - TimeOfDay picked = await showTimePicker( - context: context, - initialTime: _selectedTime - ); - if (picked != null && picked != _selectedTime) { - setState(() { - _selectedTime = picked; - }); - } - } - - @override - Widget build(BuildContext context) { - return new Scaffold( - appBar: new AppBar(title: new Text('Time picker')), - body: new Center( - child: new Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - new Text('$_selectedTime'), - new SizedBox(height: 20.0), - new RaisedButton( - onPressed: _handleSelectTime, - child: new Text('SELECT TIME') - ), - ], - ), - ), - ); - } -} diff --git a/examples/flutter_gallery/lib/gallery/item.dart b/examples/flutter_gallery/lib/gallery/item.dart index c42fd9da996..a29607e6ae1 100644 --- a/examples/flutter_gallery/lib/gallery/item.dart +++ b/examples/flutter_gallery/lib/gallery/item.dart @@ -91,10 +91,10 @@ final List kAllGalleryItems = [ buildRoute: (BuildContext context) => new ChipDemo() ), new GalleryItem( - title: 'Date picker', - subtitle: 'Date selection widget', - routeName: DatePickerDemo.routeName, - buildRoute: (BuildContext context) => new DatePickerDemo() + title: 'Date and time pickers', + subtitle: 'Date and time selection widgets', + routeName: DateAndTimePickerDemo.routeName, + buildRoute: (BuildContext context) => new DateAndTimePickerDemo() ), new GalleryItem( title: 'Dialog', @@ -216,12 +216,6 @@ final List kAllGalleryItems = [ routeName: TextFieldDemo.routeName, buildRoute: (BuildContext context) => new TextFieldDemo() ), - new GalleryItem( - title: 'Time picker', - subtitle: 'Hour and minute selection widget', - routeName: TimePickerDemo.routeName, - buildRoute: (BuildContext context) => new TimePickerDemo() - ), new GalleryItem( title: 'Tooltips', subtitle: 'Short message displayed after a long-press', diff --git a/examples/flutter_gallery/test_driver/transitions_perf_test.dart b/examples/flutter_gallery/test_driver/transitions_perf_test.dart index 8c17bc34c70..5b8b48f5536 100644 --- a/examples/flutter_gallery/test_driver/transitions_perf_test.dart +++ b/examples/flutter_gallery/test_driver/transitions_perf_test.dart @@ -31,7 +31,7 @@ final List demoTitles = [ 'Buttons', 'Cards', 'Chips', - 'Date picker', + 'Date and time pickers', 'Dialog', 'Expand/collapse list control', 'Expansion panels', @@ -52,7 +52,6 @@ final List demoTitles = [ 'Snackbar', 'Tabs', 'Text fields', - 'Time picker', 'Tooltips', // Style 'Colors',