DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Combine date and time picker demos (#6933)

Browse Source
This commit is contained in:
Hans Muller 2016-11-21 11:49:35 -08:00 committed by GitHub
parent 98016b1c4a
commit 39872e7df1
6 changed files with 224 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/flutter_gallery/lib/demo/all.dart
View File

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

218
examples/flutter_gallery/lib/demo/date_and_time_picker_demo.dart Normal file
View File

@ -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: <Widget>[
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<DateTime> selectDate;
final ValueChanged<TimeOfDay> selectTime;
Future<Null> _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<Null> _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: <Widget>[
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<DateAndTimePickerDemo> {
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<String> _allActivities = <String>['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: <Widget>[
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<String>(
value: _activity,
isDense: true,
onChanged: (String newValue) {
setState(() {
_activity = newValue;
});
},
items: _allActivities.map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
),
),
],
),
),
),
),
);
}
}

54
examples/flutter_gallery/lib/demo/date_picker_demo.dart
View File

@ -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<DatePickerDemo> {
DateTime _selectedDate = new DateTime.now();
Future<Null> _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: <Widget>[
new Text(new DateFormat.yMMMd().format(_selectedDate)),
new SizedBox(height: 20.0),
new RaisedButton(
onPressed: _handleSelectDate,
child: new Text('SELECT DATE')
),
],
),
)
);
}
}

50
examples/flutter_gallery/lib/demo/time_picker_demo.dart
View File

@ -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<TimePickerDemo> {
TimeOfDay _selectedTime = const TimeOfDay(hour: 7, minute: 28);
Future<Null> _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: <Widget>[
new Text('$_selectedTime'),
new SizedBox(height: 20.0),
new RaisedButton(
onPressed: _handleSelectTime,
child: new Text('SELECT TIME')
),
],
),
),
);
}
}

14
examples/flutter_gallery/lib/gallery/item.dart
View File

@ -91,10 +91,10 @@ final List<GalleryItem> kAllGalleryItems = <GalleryItem>[
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<GalleryItem> kAllGalleryItems = <GalleryItem>[
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',

3
examples/flutter_gallery/test_driver/transitions_perf_test.dart
View File

@ -31,7 +31,7 @@ final List<String> demoTitles = <String>[
'Buttons',
'Cards',
'Chips',
'Date picker',
'Date and time pickers',
'Dialog',
'Expand/collapse list control',
'Expansion panels',
@ -52,7 +52,6 @@ final List<String> demoTitles = <String>[
'Snackbar',
'Tabs',
'Text fields',
'Time picker',
'Tooltips',
// Style
'Colors',