// 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 Expanded( flex: 4, child: new _InputDropdown( labelText: labelText, valueText: new DateFormat.yMMMd().format(selectedDate), valueStyle: valueStyle, onPressed: () { _selectDate(context); }, ), ), new SizedBox(width: 12.0), new Expanded( 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(), ), ), ], ), ), ), ), ); } }