// 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 'dart:math' as math; import 'package:flutter/rendering.dart'; import 'package:flutter/services.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter/gestures.dart' show DragStartBehavior; import 'button_bar.dart'; import 'colors.dart'; import 'debug.dart'; import 'dialog.dart'; import 'feedback.dart'; import 'flat_button.dart'; import 'icon_button.dart'; import 'icons.dart'; import 'ink_well.dart'; import 'material.dart'; import 'material_localizations.dart'; import 'text_theme.dart'; import 'theme.dart'; // Examples can assume: // BuildContext context; /// Initial display mode of the date picker dialog. /// /// Date picker UI mode for either showing a list of available years or a /// monthly calendar initially in the dialog shown by calling [showDatePicker]. /// /// See also: /// /// * [showDatePicker], which shows a dialog that contains a material design /// date picker. enum DatePickerMode { /// Show a date picker UI for choosing a month and day. day, /// Show a date picker UI for choosing a year. year, } const Duration _kMonthScrollDuration = Duration(milliseconds: 200); const double _kDayPickerRowHeight = 42.0; const int _kMaxDayPickerRowCount = 6; // A 31 day month that starts on Saturday. // Two extra rows: one for the day-of-week header and one for the month header. const double _kMaxDayPickerHeight = _kDayPickerRowHeight * (_kMaxDayPickerRowCount + 2); // Shows the selected date in large font and toggles between year and day mode class _DatePickerHeader extends StatelessWidget { const _DatePickerHeader({ Key key, @required this.selectedDate, @required this.mode, @required this.onModeChanged, @required this.orientation, }) : assert(selectedDate != null), assert(mode != null), assert(orientation != null), super(key: key); final DateTime selectedDate; final DatePickerMode mode; final ValueChanged<DatePickerMode> onModeChanged; final Orientation orientation; void _handleChangeMode(DatePickerMode value) { if (value != mode) onModeChanged(value); } @override Widget build(BuildContext context) { final MaterialLocalizations localizations = MaterialLocalizations.of(context); final ThemeData themeData = Theme.of(context); final TextTheme headerTextTheme = themeData.primaryTextTheme; Color dayColor; Color yearColor; switch (themeData.primaryColorBrightness) { case Brightness.light: dayColor = mode == DatePickerMode.day ? Colors.black87 : Colors.black54; yearColor = mode == DatePickerMode.year ? Colors.black87 : Colors.black54; break; case Brightness.dark: dayColor = mode == DatePickerMode.day ? Colors.white : Colors.white70; yearColor = mode == DatePickerMode.year ? Colors.white : Colors.white70; break; } final TextStyle dayStyle = headerTextTheme.display1.copyWith(color: dayColor); final TextStyle yearStyle = headerTextTheme.subhead.copyWith(color: yearColor); Color backgroundColor; switch (themeData.brightness) { case Brightness.light: backgroundColor = themeData.primaryColor; break; case Brightness.dark: backgroundColor = themeData.backgroundColor; break; } EdgeInsets padding; MainAxisAlignment mainAxisAlignment; switch (orientation) { case Orientation.portrait: padding = const EdgeInsets.all(16.0); mainAxisAlignment = MainAxisAlignment.center; break; case Orientation.landscape: padding = const EdgeInsets.all(8.0); mainAxisAlignment = MainAxisAlignment.start; break; } final Widget yearButton = IgnorePointer( ignoring: mode != DatePickerMode.day, ignoringSemantics: false, child: _DateHeaderButton( color: backgroundColor, onTap: Feedback.wrapForTap(() => _handleChangeMode(DatePickerMode.year), context), child: Semantics( selected: mode == DatePickerMode.year, child: Text(localizations.formatYear(selectedDate), style: yearStyle), ), ), ); final Widget dayButton = IgnorePointer( ignoring: mode == DatePickerMode.day, ignoringSemantics: false, child: _DateHeaderButton( color: backgroundColor, onTap: Feedback.wrapForTap(() => _handleChangeMode(DatePickerMode.day), context), child: Semantics( selected: mode == DatePickerMode.day, child: Text(localizations.formatMediumDate(selectedDate), style: dayStyle), ), ), ); return Container( padding: padding, color: backgroundColor, child: Column( mainAxisAlignment: mainAxisAlignment, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[yearButton, dayButton], ), ); } } class _DateHeaderButton extends StatelessWidget { const _DateHeaderButton({ Key key, this.onTap, this.color, this.child, }) : super(key: key); final VoidCallback onTap; final Color color; final Widget child; @override Widget build(BuildContext context) { final ThemeData theme = Theme.of(context); return Material( type: MaterialType.button, color: color, child: InkWell( borderRadius: kMaterialEdges[MaterialType.button], highlightColor: theme.highlightColor, splashColor: theme.splashColor, onTap: onTap, child: Container( padding: const EdgeInsets.symmetric(horizontal: 8.0), child: child, ), ), ); } } class _DayPickerGridDelegate extends SliverGridDelegate { const _DayPickerGridDelegate(); @override SliverGridLayout getLayout(SliverConstraints constraints) { const int columnCount = DateTime.daysPerWeek; final double tileWidth = constraints.crossAxisExtent / columnCount; final double viewTileHeight = constraints.viewportMainAxisExtent / (_kMaxDayPickerRowCount + 1); final double tileHeight = math.max(_kDayPickerRowHeight, viewTileHeight); return SliverGridRegularTileLayout( crossAxisCount: columnCount, mainAxisStride: tileHeight, crossAxisStride: tileWidth, childMainAxisExtent: tileHeight, childCrossAxisExtent: tileWidth, reverseCrossAxis: axisDirectionIsReversed(constraints.crossAxisDirection), ); } @override bool shouldRelayout(_DayPickerGridDelegate oldDelegate) => false; } const _DayPickerGridDelegate _kDayPickerGridDelegate = _DayPickerGridDelegate(); /// Displays the days of a given month and allows choosing a day. /// /// The days are arranged in a rectangular grid with one column for each day of /// the week. /// /// The day picker widget is rarely used directly. Instead, consider using /// [showDatePicker], which creates a date picker dialog. /// /// See also: /// /// * [showDatePicker], which shows a dialog that contains a material design /// date picker. /// * [showTimePicker], which shows a dialog that contains a material design /// time picker. class DayPicker extends StatelessWidget { /// Creates a day picker. /// /// Rarely used directly. Instead, typically used as part of a [MonthPicker]. DayPicker({ Key key, @required this.selectedDate, @required this.currentDate, @required this.onChanged, @required this.firstDate, @required this.lastDate, @required this.displayedMonth, this.selectableDayPredicate, this.dragStartBehavior = DragStartBehavior.start, }) : assert(selectedDate != null), assert(currentDate != null), assert(onChanged != null), assert(displayedMonth != null), assert(dragStartBehavior != null), assert(!firstDate.isAfter(lastDate)), assert(selectedDate.isAfter(firstDate) || selectedDate.isAtSameMomentAs(firstDate)), super(key: key); /// The currently selected date. /// /// This date is highlighted in the picker. final DateTime selectedDate; /// The current date at the time the picker is displayed. final DateTime currentDate; /// Called when the user picks a day. final ValueChanged<DateTime> onChanged; /// The earliest date the user is permitted to pick. final DateTime firstDate; /// The latest date the user is permitted to pick. final DateTime lastDate; /// The month whose days are displayed by this picker. final DateTime displayedMonth; /// Optional user supplied predicate function to customize selectable days. final SelectableDayPredicate selectableDayPredicate; /// Determines the way that drag start behavior is handled. /// /// If set to [DragStartBehavior.start], the drag gesture used to scroll a /// date picker wheel will begin upon the detection of a drag gesture. If set /// to [DragStartBehavior.down] it will begin when a down event is first /// detected. /// /// In general, setting this to [DragStartBehavior.start] will make drag /// animation smoother and setting it to [DragStartBehavior.down] will make /// drag behavior feel slightly more reactive. /// /// By default, the drag start behavior is [DragStartBehavior.start]. /// /// See also: /// /// * [DragGestureRecognizer.dragStartBehavior], which gives an example for the different behaviors. final DragStartBehavior dragStartBehavior; /// Builds widgets showing abbreviated days of week. The first widget in the /// returned list corresponds to the first day of week for the current locale. /// /// Examples: /// /// ``` /// ┌ Sunday is the first day of week in the US (en_US) /// | /// S M T W T F S <-- the returned list contains these widgets /// _ _ _ _ _ 1 2 /// 3 4 5 6 7 8 9 /// /// ┌ But it's Monday in the UK (en_GB) /// | /// M T W T F S S <-- the returned list contains these widgets /// _ _ _ _ 1 2 3 /// 4 5 6 7 8 9 10 /// ``` List<Widget> _getDayHeaders(TextStyle headerStyle, MaterialLocalizations localizations) { final List<Widget> result = <Widget>[]; for (int i = localizations.firstDayOfWeekIndex; true; i = (i + 1) % 7) { final String weekday = localizations.narrowWeekdays[i]; result.add(ExcludeSemantics( child: Center(child: Text(weekday, style: headerStyle)), )); if (i == (localizations.firstDayOfWeekIndex - 1) % 7) break; } return result; } // Do not use this directly - call getDaysInMonth instead. static const List<int> _daysInMonth = <int>[31, -1, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; /// Returns the number of days in a month, according to the proleptic /// Gregorian calendar. /// /// This applies the leap year logic introduced by the Gregorian reforms of /// 1582. It will not give valid results for dates prior to that time. static int getDaysInMonth(int year, int month) { if (month == DateTime.february) { final bool isLeapYear = (year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0); if (isLeapYear) return 29; return 28; } return _daysInMonth[month - 1]; } /// Computes the offset from the first day of week that the first day of the /// [month] falls on. /// /// For example, September 1, 2017 falls on a Friday, which in the calendar /// localized for United States English appears as: /// /// ``` /// S M T W T F S /// _ _ _ _ _ 1 2 /// ``` /// /// The offset for the first day of the months is the number of leading blanks /// in the calendar, i.e. 5. /// /// The same date localized for the Russian calendar has a different offset, /// because the first day of week is Monday rather than Sunday: /// /// ``` /// M T W T F S S /// _ _ _ _ 1 2 3 /// ``` /// /// So the offset is 4, rather than 5. /// /// This code consolidates the following: /// /// - [DateTime.weekday] provides a 1-based index into days of week, with 1 /// falling on Monday. /// - [MaterialLocalizations.firstDayOfWeekIndex] provides a 0-based index /// into the [MaterialLocalizations.narrowWeekdays] list. /// - [MaterialLocalizations.narrowWeekdays] list provides localized names of /// days of week, always starting with Sunday and ending with Saturday. int _computeFirstDayOffset(int year, int month, MaterialLocalizations localizations) { // 0-based day of week, with 0 representing Monday. final int weekdayFromMonday = DateTime(year, month).weekday - 1; // 0-based day of week, with 0 representing Sunday. final int firstDayOfWeekFromSunday = localizations.firstDayOfWeekIndex; // firstDayOfWeekFromSunday recomputed to be Monday-based final int firstDayOfWeekFromMonday = (firstDayOfWeekFromSunday - 1) % 7; // Number of days between the first day of week appearing on the calendar, // and the day corresponding to the 1-st of the month. return (weekdayFromMonday - firstDayOfWeekFromMonday) % 7; } @override Widget build(BuildContext context) { final ThemeData themeData = Theme.of(context); final MaterialLocalizations localizations = MaterialLocalizations.of(context); final int year = displayedMonth.year; final int month = displayedMonth.month; final int daysInMonth = getDaysInMonth(year, month); final int firstDayOffset = _computeFirstDayOffset(year, month, localizations); final List<Widget> labels = <Widget>[ ..._getDayHeaders(themeData.textTheme.caption, localizations), ]; for (int i = 0; true; i += 1) { // 1-based day of month, e.g. 1-31 for January, and 1-29 for February on // a leap year. final int day = i - firstDayOffset + 1; if (day > daysInMonth) break; if (day < 1) { labels.add(Container()); } else { final DateTime dayToBuild = DateTime(year, month, day); final bool disabled = dayToBuild.isAfter(lastDate) || dayToBuild.isBefore(firstDate) || (selectableDayPredicate != null && !selectableDayPredicate(dayToBuild)); BoxDecoration decoration; TextStyle itemStyle = themeData.textTheme.body1; final bool isSelectedDay = selectedDate.year == year && selectedDate.month == month && selectedDate.day == day; if (isSelectedDay) { // The selected day gets a circle background highlight, and a contrasting text color. itemStyle = themeData.accentTextTheme.body2; decoration = BoxDecoration( color: themeData.accentColor, shape: BoxShape.circle, ); } else if (disabled) { itemStyle = themeData.textTheme.body1.copyWith(color: themeData.disabledColor); } else if (currentDate.year == year && currentDate.month == month && currentDate.day == day) { // The current day gets a different text color. itemStyle = themeData.textTheme.body2.copyWith(color: themeData.accentColor); } Widget dayWidget = Container( decoration: decoration, child: Center( child: Semantics( // We want the day of month to be spoken first irrespective of the // locale-specific preferences or TextDirection. This is because // an accessibility user is more likely to be interested in the // day of month before the rest of the date, as they are looking // for the day of month. To do that we prepend day of month to the // formatted full date. label: '${localizations.formatDecimal(day)}, ${localizations.formatFullDate(dayToBuild)}', selected: isSelectedDay, sortKey: OrdinalSortKey(day.toDouble()), child: ExcludeSemantics( child: Text(localizations.formatDecimal(day), style: itemStyle), ), ), ), ); if (!disabled) { dayWidget = GestureDetector( behavior: HitTestBehavior.opaque, onTap: () { onChanged(dayToBuild); }, child: dayWidget, dragStartBehavior: dragStartBehavior, ); } labels.add(dayWidget); } } return Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0), child: Column( children: <Widget>[ Container( height: _kDayPickerRowHeight, child: Center( child: ExcludeSemantics( child: Text( localizations.formatMonthYear(displayedMonth), style: themeData.textTheme.subhead, ), ), ), ), Flexible( child: GridView.custom( gridDelegate: _kDayPickerGridDelegate, childrenDelegate: SliverChildListDelegate(labels, addRepaintBoundaries: false), padding: EdgeInsets.zero, ), ), ], ), ); } } /// A scrollable list of months to allow picking a month. /// /// Shows the days of each month in a rectangular grid with one column for each /// day of the week. /// /// The month picker widget is rarely used directly. Instead, consider using /// [showDatePicker], which creates a date picker dialog. /// /// See also: /// /// * [showDatePicker], which shows a dialog that contains a material design /// date picker. /// * [showTimePicker], which shows a dialog that contains a material design /// time picker. class MonthPicker extends StatefulWidget { /// Creates a month picker. /// /// Rarely used directly. Instead, typically used as part of the dialog shown /// by [showDatePicker]. MonthPicker({ Key key, @required this.selectedDate, @required this.onChanged, @required this.firstDate, @required this.lastDate, this.selectableDayPredicate, this.dragStartBehavior = DragStartBehavior.start, }) : assert(selectedDate != null), assert(onChanged != null), assert(!firstDate.isAfter(lastDate)), assert(selectedDate.isAfter(firstDate) || selectedDate.isAtSameMomentAs(firstDate)), super(key: key); /// The currently selected date. /// /// This date is highlighted in the picker. final DateTime selectedDate; /// Called when the user picks a month. final ValueChanged<DateTime> onChanged; /// The earliest date the user is permitted to pick. final DateTime firstDate; /// The latest date the user is permitted to pick. final DateTime lastDate; /// Optional user supplied predicate function to customize selectable days. final SelectableDayPredicate selectableDayPredicate; /// {@macro flutter.widgets.scrollable.dragStartBehavior} final DragStartBehavior dragStartBehavior; @override _MonthPickerState createState() => _MonthPickerState(); } class _MonthPickerState extends State<MonthPicker> with SingleTickerProviderStateMixin { static final Animatable<double> _chevronOpacityTween = Tween<double>(begin: 1.0, end: 0.0) .chain(CurveTween(curve: Curves.easeInOut)); @override void initState() { super.initState(); // Initially display the pre-selected date. final int monthPage = _monthDelta(widget.firstDate, widget.selectedDate); _dayPickerController = PageController(initialPage: monthPage); _handleMonthPageChanged(monthPage); _updateCurrentDate(); // Setup the fade animation for chevrons _chevronOpacityController = AnimationController( duration: const Duration(milliseconds: 250), vsync: this, ); _chevronOpacityAnimation = _chevronOpacityController.drive(_chevronOpacityTween); } @override void didUpdateWidget(MonthPicker oldWidget) { super.didUpdateWidget(oldWidget); if (widget.selectedDate != oldWidget.selectedDate) { final int monthPage = _monthDelta(widget.firstDate, widget.selectedDate); _dayPickerController = PageController(initialPage: monthPage); _handleMonthPageChanged(monthPage); } } MaterialLocalizations localizations; TextDirection textDirection; @override void didChangeDependencies() { super.didChangeDependencies(); localizations = MaterialLocalizations.of(context); textDirection = Directionality.of(context); } DateTime _todayDate; DateTime _currentDisplayedMonthDate; Timer _timer; PageController _dayPickerController; AnimationController _chevronOpacityController; Animation<double> _chevronOpacityAnimation; void _updateCurrentDate() { _todayDate = DateTime.now(); final DateTime tomorrow = DateTime(_todayDate.year, _todayDate.month, _todayDate.day + 1); Duration timeUntilTomorrow = tomorrow.difference(_todayDate); timeUntilTomorrow += const Duration(seconds: 1); // so we don't miss it by rounding _timer?.cancel(); _timer = Timer(timeUntilTomorrow, () { setState(() { _updateCurrentDate(); }); }); } static int _monthDelta(DateTime startDate, DateTime endDate) { return (endDate.year - startDate.year) * 12 + endDate.month - startDate.month; } /// Add months to a month truncated date. DateTime _addMonthsToMonthDate(DateTime monthDate, int monthsToAdd) { return DateTime(monthDate.year + monthsToAdd ~/ 12, monthDate.month + monthsToAdd % 12); } Widget _buildItems(BuildContext context, int index) { final DateTime month = _addMonthsToMonthDate(widget.firstDate, index); return DayPicker( key: ValueKey<DateTime>(month), selectedDate: widget.selectedDate, currentDate: _todayDate, onChanged: widget.onChanged, firstDate: widget.firstDate, lastDate: widget.lastDate, displayedMonth: month, selectableDayPredicate: widget.selectableDayPredicate, dragStartBehavior: widget.dragStartBehavior, ); } void _handleNextMonth() { if (!_isDisplayingLastMonth) { SemanticsService.announce(localizations.formatMonthYear(_nextMonthDate), textDirection); _dayPickerController.nextPage(duration: _kMonthScrollDuration, curve: Curves.ease); } } void _handlePreviousMonth() { if (!_isDisplayingFirstMonth) { SemanticsService.announce(localizations.formatMonthYear(_previousMonthDate), textDirection); _dayPickerController.previousPage(duration: _kMonthScrollDuration, curve: Curves.ease); } } /// True if the earliest allowable month is displayed. bool get _isDisplayingFirstMonth { return !_currentDisplayedMonthDate.isAfter( DateTime(widget.firstDate.year, widget.firstDate.month)); } /// True if the latest allowable month is displayed. bool get _isDisplayingLastMonth { return !_currentDisplayedMonthDate.isBefore( DateTime(widget.lastDate.year, widget.lastDate.month)); } DateTime _previousMonthDate; DateTime _nextMonthDate; void _handleMonthPageChanged(int monthPage) { setState(() { _previousMonthDate = _addMonthsToMonthDate(widget.firstDate, monthPage - 1); _currentDisplayedMonthDate = _addMonthsToMonthDate(widget.firstDate, monthPage); _nextMonthDate = _addMonthsToMonthDate(widget.firstDate, monthPage + 1); }); } @override Widget build(BuildContext context) { return SizedBox( // The month picker just adds month navigation to the day picker, so make // it the same height as the DayPicker height: _kMaxDayPickerHeight, child: Stack( children: <Widget>[ Semantics( sortKey: _MonthPickerSortKey.calendar, child: NotificationListener<ScrollStartNotification>( onNotification: (_) { _chevronOpacityController.forward(); return false; }, child: NotificationListener<ScrollEndNotification>( onNotification: (_) { _chevronOpacityController.reverse(); return false; }, child: PageView.builder( dragStartBehavior: widget.dragStartBehavior, key: ValueKey<DateTime>(widget.selectedDate), controller: _dayPickerController, scrollDirection: Axis.horizontal, itemCount: _monthDelta(widget.firstDate, widget.lastDate) + 1, itemBuilder: _buildItems, onPageChanged: _handleMonthPageChanged, ), ), ), ), PositionedDirectional( top: 0.0, start: 8.0, child: Semantics( sortKey: _MonthPickerSortKey.previousMonth, child: FadeTransition( opacity: _chevronOpacityAnimation, child: IconButton( icon: const Icon(Icons.chevron_left), tooltip: _isDisplayingFirstMonth ? null : '${localizations.previousMonthTooltip} ${localizations.formatMonthYear(_previousMonthDate)}', onPressed: _isDisplayingFirstMonth ? null : _handlePreviousMonth, ), ), ), ), PositionedDirectional( top: 0.0, end: 8.0, child: Semantics( sortKey: _MonthPickerSortKey.nextMonth, child: FadeTransition( opacity: _chevronOpacityAnimation, child: IconButton( icon: const Icon(Icons.chevron_right), tooltip: _isDisplayingLastMonth ? null : '${localizations.nextMonthTooltip} ${localizations.formatMonthYear(_nextMonthDate)}', onPressed: _isDisplayingLastMonth ? null : _handleNextMonth, ), ), ), ), ], ), ); } @override void dispose() { _timer?.cancel(); _chevronOpacityController?.dispose(); _dayPickerController?.dispose(); super.dispose(); } } // Defines semantic traversal order of the top-level widgets inside the month // picker. class _MonthPickerSortKey extends OrdinalSortKey { const _MonthPickerSortKey(double order) : super(order); static const _MonthPickerSortKey previousMonth = _MonthPickerSortKey(1.0); static const _MonthPickerSortKey nextMonth = _MonthPickerSortKey(2.0); static const _MonthPickerSortKey calendar = _MonthPickerSortKey(3.0); } /// A scrollable list of years to allow picking a year. /// /// The year picker widget is rarely used directly. Instead, consider using /// [showDatePicker], which creates a date picker dialog. /// /// Requires one of its ancestors to be a [Material] widget. /// /// See also: /// /// * [showDatePicker], which shows a dialog that contains a material design /// date picker. /// * [showTimePicker], which shows a dialog that contains a material design /// time picker. class YearPicker extends StatefulWidget { /// Creates a year picker. /// /// The [selectedDate] and [onChanged] arguments must not be null. The /// [lastDate] must be after the [firstDate]. /// /// Rarely used directly. Instead, typically used as part of the dialog shown /// by [showDatePicker]. YearPicker({ Key key, @required this.selectedDate, @required this.onChanged, @required this.firstDate, @required this.lastDate, this.dragStartBehavior = DragStartBehavior.start, }) : assert(selectedDate != null), assert(onChanged != null), assert(!firstDate.isAfter(lastDate)), super(key: key); /// The currently selected date. /// /// This date is highlighted in the picker. final DateTime selectedDate; /// Called when the user picks a year. final ValueChanged<DateTime> onChanged; /// The earliest date the user is permitted to pick. final DateTime firstDate; /// The latest date the user is permitted to pick. final DateTime lastDate; /// {@macro flutter.widgets.scrollable.dragStartBehavior} final DragStartBehavior dragStartBehavior; @override _YearPickerState createState() => _YearPickerState(); } class _YearPickerState extends State<YearPicker> { static const double _itemExtent = 50.0; ScrollController scrollController; @override void initState() { super.initState(); scrollController = ScrollController( // Move the initial scroll position to the currently selected date's year. initialScrollOffset: (widget.selectedDate.year - widget.firstDate.year) * _itemExtent, ); } @override Widget build(BuildContext context) { assert(debugCheckHasMaterial(context)); final ThemeData themeData = Theme.of(context); final TextStyle style = themeData.textTheme.body1; return ListView.builder( dragStartBehavior: widget.dragStartBehavior, controller: scrollController, itemExtent: _itemExtent, itemCount: widget.lastDate.year - widget.firstDate.year + 1, itemBuilder: (BuildContext context, int index) { final int year = widget.firstDate.year + index; final bool isSelected = year == widget.selectedDate.year; final TextStyle itemStyle = isSelected ? themeData.textTheme.headline.copyWith(color: themeData.accentColor) : style; return InkWell( key: ValueKey<int>(year), onTap: () { widget.onChanged(DateTime(year, widget.selectedDate.month, widget.selectedDate.day)); }, child: Center( child: Semantics( selected: isSelected, child: Text(year.toString(), style: itemStyle), ), ), ); }, ); } } class _DatePickerDialog extends StatefulWidget { const _DatePickerDialog({ Key key, this.initialDate, this.firstDate, this.lastDate, this.selectableDayPredicate, this.initialDatePickerMode, }) : super(key: key); final DateTime initialDate; final DateTime firstDate; final DateTime lastDate; final SelectableDayPredicate selectableDayPredicate; final DatePickerMode initialDatePickerMode; @override _DatePickerDialogState createState() => _DatePickerDialogState(); } class _DatePickerDialogState extends State<_DatePickerDialog> { @override void initState() { super.initState(); _selectedDate = widget.initialDate; _mode = widget.initialDatePickerMode; } bool _announcedInitialDate = false; MaterialLocalizations localizations; TextDirection textDirection; @override void didChangeDependencies() { super.didChangeDependencies(); localizations = MaterialLocalizations.of(context); textDirection = Directionality.of(context); if (!_announcedInitialDate) { _announcedInitialDate = true; SemanticsService.announce( localizations.formatFullDate(_selectedDate), textDirection, ); } } DateTime _selectedDate; DatePickerMode _mode; final GlobalKey _pickerKey = GlobalKey(); void _vibrate() { switch (Theme.of(context).platform) { case TargetPlatform.android: case TargetPlatform.fuchsia: HapticFeedback.vibrate(); break; case TargetPlatform.iOS: break; } } void _handleModeChanged(DatePickerMode mode) { _vibrate(); setState(() { _mode = mode; if (_mode == DatePickerMode.day) { SemanticsService.announce(localizations.formatMonthYear(_selectedDate), textDirection); } else { SemanticsService.announce(localizations.formatYear(_selectedDate), textDirection); } }); } void _handleYearChanged(DateTime value) { if (value.isBefore(widget.firstDate)) value = widget.firstDate; else if (value.isAfter(widget.lastDate)) value = widget.lastDate; if (value == _selectedDate) return; _vibrate(); setState(() { _mode = DatePickerMode.day; _selectedDate = value; }); } void _handleDayChanged(DateTime value) { _vibrate(); setState(() { _selectedDate = value; }); } void _handleCancel() { Navigator.pop(context); } void _handleOk() { Navigator.pop(context, _selectedDate); } Widget _buildPicker() { assert(_mode != null); switch (_mode) { case DatePickerMode.day: return MonthPicker( key: _pickerKey, selectedDate: _selectedDate, onChanged: _handleDayChanged, firstDate: widget.firstDate, lastDate: widget.lastDate, selectableDayPredicate: widget.selectableDayPredicate, ); case DatePickerMode.year: return YearPicker( key: _pickerKey, selectedDate: _selectedDate, onChanged: _handleYearChanged, firstDate: widget.firstDate, lastDate: widget.lastDate, ); } return null; } @override Widget build(BuildContext context) { final ThemeData theme = Theme.of(context); final Widget picker = _buildPicker(); final Widget actions = ButtonBar( children: <Widget>[ FlatButton( child: Text(localizations.cancelButtonLabel), onPressed: _handleCancel, ), FlatButton( child: Text(localizations.okButtonLabel), onPressed: _handleOk, ), ], ); final Dialog dialog = Dialog( child: OrientationBuilder( builder: (BuildContext context, Orientation orientation) { assert(orientation != null); final Widget header = _DatePickerHeader( selectedDate: _selectedDate, mode: _mode, onModeChanged: _handleModeChanged, orientation: orientation, ); switch (orientation) { case Orientation.portrait: return Container( color: theme.dialogBackgroundColor, child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ header, Flexible(child: picker), actions, ], ), ); case Orientation.landscape: return Container( color: theme.dialogBackgroundColor, child: Row( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ Flexible(child: header), Flexible( flex: 2, // have the picker take up 2/3 of the dialog width child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ Flexible(child: picker), actions, ], ), ), ], ), ); } return null; } ), ); return Theme( data: theme.copyWith( dialogBackgroundColor: Colors.transparent, ), child: dialog, ); } } /// Signature for predicating dates for enabled date selections. /// /// See [showDatePicker]. typedef SelectableDayPredicate = bool Function(DateTime day); /// Shows a dialog containing a material design date picker. /// /// The returned [Future] resolves to the date selected by the user when the /// user closes the dialog. If the user cancels the dialog, null is returned. /// /// An optional [selectableDayPredicate] function can be passed in to customize /// the days to enable for selection. If provided, only the days that /// [selectableDayPredicate] returned true for will be selectable. /// /// An optional [initialDatePickerMode] argument can be used to display the /// date picker initially in the year or month+day picker mode. It defaults /// to month+day, and must not be null. /// /// An optional [locale] argument can be used to set the locale for the date /// picker. It defaults to the ambient locale provided by [Localizations]. /// /// An optional [textDirection] argument can be used to set the text direction /// (RTL or LTR) for the date picker. It defaults to the ambient text direction /// provided by [Directionality]. If both [locale] and [textDirection] are not /// null, [textDirection] overrides the direction chosen for the [locale]. /// /// The [context] argument is passed to [showDialog], the documentation for /// which discusses how it is used. /// /// The [builder] parameter can be used to wrap the dialog widget /// to add inherited widgets like [Theme]. /// /// {@tool sample} /// Show a date picker with the dark theme. /// /// ```dart /// Future<DateTime> selectedDate = showDatePicker( /// context: context, /// initialDate: DateTime.now(), /// firstDate: DateTime(2018), /// lastDate: DateTime(2030), /// builder: (BuildContext context, Widget child) { /// return Theme( /// data: ThemeData.dark(), /// child: child, /// ); /// }, /// ); /// ``` /// {@end-tool} /// /// The [context], [initialDate], [firstDate], and [lastDate] parameters must /// not be null. /// /// See also: /// /// * [showTimePicker], which shows a dialog that contains a material design /// time picker. /// * [DayPicker], which displays the days of a given month and allows /// choosing a day. /// * [MonthPicker], which displays a scrollable list of months to allow /// picking a month. /// * [YearPicker], which displays a scrollable list of years to allow picking /// a year. Future<DateTime> showDatePicker({ @required BuildContext context, @required DateTime initialDate, @required DateTime firstDate, @required DateTime lastDate, SelectableDayPredicate selectableDayPredicate, DatePickerMode initialDatePickerMode = DatePickerMode.day, Locale locale, TextDirection textDirection, TransitionBuilder builder, }) async { assert(initialDate != null); assert(firstDate != null); assert(lastDate != null); assert(!initialDate.isBefore(firstDate), 'initialDate must be on or after firstDate'); assert(!initialDate.isAfter(lastDate), 'initialDate must be on or before lastDate'); assert(!firstDate.isAfter(lastDate), 'lastDate must be on or after firstDate'); assert( selectableDayPredicate == null || selectableDayPredicate(initialDate), 'Provided initialDate must satisfy provided selectableDayPredicate' ); assert(initialDatePickerMode != null, 'initialDatePickerMode must not be null'); assert(context != null); assert(debugCheckHasMaterialLocalizations(context)); Widget child = _DatePickerDialog( initialDate: initialDate, firstDate: firstDate, lastDate: lastDate, selectableDayPredicate: selectableDayPredicate, initialDatePickerMode: initialDatePickerMode, ); if (textDirection != null) { child = Directionality( textDirection: textDirection, child: child, ); } if (locale != null) { child = Localizations.override( context: context, locale: locale, child: child, ); } return await showDialog<DateTime>( context: context, builder: (BuildContext context) { return builder == null ? child : builder(context, child); }, ); }