calendar_date_picker.dart 42.1 KB
Newer Older
1 2 3 4 5 6
// Copyright 2014 The Flutter 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:math' as math;

7
import 'package:flutter/gestures.dart';
8 9 10 11
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';

12 13 14 15 16 17 18 19 20 21
import 'color_scheme.dart';
import 'date.dart';
import 'debug.dart';
import 'divider.dart';
import 'icon_button.dart';
import 'icons.dart';
import 'ink_well.dart';
import 'material_localizations.dart';
import 'text_theme.dart';
import 'theme.dart';
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

const Duration _monthScrollDuration = Duration(milliseconds: 200);

const double _dayPickerRowHeight = 42.0;
const int _maxDayPickerRowCount = 6; // A 31 day month that starts on Saturday.
// One extra row for the day-of-week header.
const double _maxDayPickerHeight = _dayPickerRowHeight * (_maxDayPickerRowCount + 1);
const double _monthPickerHorizontalPadding = 8.0;

const int _yearPickerColumnCount = 3;
const double _yearPickerPadding = 16.0;
const double _yearPickerRowHeight = 52.0;
const double _yearPickerRowSpacing = 8.0;

const double _subHeaderHeight = 52.0;
const double _monthNavButtonsWidth = 108.0;

39 40
/// Displays a grid of days for a given month and allows the user to select a
/// date.
41 42 43 44 45 46
///
/// Days are arranged in a rectangular grid with one column for each day of the
/// week. Controls are provided to change the year and month that the grid is
/// showing.
///
/// The calendar picker widget is rarely used directly. Instead, consider using
47 48
/// [showDatePicker], which will create a dialog that uses this as well as
/// provides a text entry option.
49 50 51
///
/// See also:
///
52 53 54
///  * [showDatePicker], which creates a Dialog that contains a
///    [CalendarDatePicker] and provides an optional compact view where the
///    user can enter a date as a line of text.
55
///  * [showTimePicker], which shows a dialog that contains a Material Design
56 57 58
///    time picker.
///
class CalendarDatePicker extends StatefulWidget {
59
  /// Creates a calendar date picker.
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
  ///
  /// It will display a grid of days for the [initialDate]'s month. The day
  /// indicated by [initialDate] will be selected.
  ///
  /// The optional [onDisplayedMonthChanged] callback can be used to track
  /// the currently displayed month.
  ///
  /// The user interface provides a way to change the year of the month being
  /// displayed. By default it will show the day grid, but this can be changed
  /// to start in the year selection interface with [initialCalendarMode] set
  /// to [DatePickerMode.year].
  ///
  /// The [initialDate], [firstDate], [lastDate], [onDateChanged], and
  /// [initialCalendarMode] must be non-null.
  ///
  /// [lastDate] must be after or equal to [firstDate].
  ///
  /// [initialDate] must be between [firstDate] and [lastDate] or equal to
  /// one of them.
  ///
80 81 82 83
  /// [currentDate] represents the current day (i.e. today). This
  /// date will be highlighted in the day grid. If null, the date of
  /// `DateTime.now()` will be used.
  ///
84 85 86
  /// If [selectableDayPredicate] is non-null, it must return `true` for the
  /// [initialDate].
  CalendarDatePicker({
87
    super.key,
88 89 90 91 92
    required DateTime initialDate,
    required DateTime firstDate,
    required DateTime lastDate,
    DateTime? currentDate,
    required this.onDateChanged,
93 94 95 96 97 98
    this.onDisplayedMonthChanged,
    this.initialCalendarMode = DatePickerMode.day,
    this.selectableDayPredicate,
  }) : assert(initialDate != null),
       assert(firstDate != null),
       assert(lastDate != null),
99 100 101 102
       initialDate = DateUtils.dateOnly(initialDate),
       firstDate = DateUtils.dateOnly(firstDate),
       lastDate = DateUtils.dateOnly(lastDate),
       currentDate = DateUtils.dateOnly(currentDate ?? DateTime.now()),
103
       assert(onDateChanged != null),
104
       assert(initialCalendarMode != null) {
105 106
    assert(
      !this.lastDate.isBefore(this.firstDate),
107
      'lastDate ${this.lastDate} must be on or after firstDate ${this.firstDate}.',
108 109 110
    );
    assert(
      !this.initialDate.isBefore(this.firstDate),
111
      'initialDate ${this.initialDate} must be on or after firstDate ${this.firstDate}.',
112 113 114
    );
    assert(
      !this.initialDate.isAfter(this.lastDate),
115
      'initialDate ${this.initialDate} must be on or before lastDate ${this.lastDate}.',
116 117
    );
    assert(
118
      selectableDayPredicate == null || selectableDayPredicate!(this.initialDate),
119
      'Provided initialDate ${this.initialDate} must satisfy provided selectableDayPredicate.',
120 121 122 123 124 125 126 127 128 129 130 131
    );
  }

  /// The initially selected [DateTime] that the picker should display.
  final DateTime initialDate;

  /// The earliest allowable [DateTime] that the user can select.
  final DateTime firstDate;

  /// The latest allowable [DateTime] that the user can select.
  final DateTime lastDate;

132 133 134
  /// The [DateTime] representing today. It will be highlighted in the day grid.
  final DateTime currentDate;

135 136 137 138
  /// Called when the user selects a date in the picker.
  final ValueChanged<DateTime> onDateChanged;

  /// Called when the user navigates to a new month/year in the picker.
139
  final ValueChanged<DateTime>? onDisplayedMonthChanged;
140 141 142 143 144

  /// The initial display of the calendar picker.
  final DatePickerMode initialCalendarMode;

  /// Function to provide full control over which dates in the calendar can be selected.
145
  final SelectableDayPredicate? selectableDayPredicate;
146 147

  @override
148
  State<CalendarDatePicker> createState() => _CalendarDatePickerState();
149 150 151 152
}

class _CalendarDatePickerState extends State<CalendarDatePicker> {
  bool _announcedInitialDate = false;
153 154
  late DatePickerMode _mode;
  late DateTime _currentDisplayedMonthDate;
155
  late DateTime _selectedDate;
156 157
  final GlobalKey _monthPickerKey = GlobalKey();
  final GlobalKey _yearPickerKey = GlobalKey();
158 159
  late MaterialLocalizations _localizations;
  late TextDirection _textDirection;
160 161 162 163

  @override
  void initState() {
    super.initState();
164
    _mode = widget.initialCalendarMode;
165 166
    _currentDisplayedMonthDate = DateTime(widget.initialDate.year, widget.initialDate.month);
    _selectedDate = widget.initialDate;
167 168 169 170 171
  }

  @override
  void didUpdateWidget(CalendarDatePicker oldWidget) {
    super.didUpdateWidget(oldWidget);
172 173 174 175 176 177 178
    if (widget.initialCalendarMode != oldWidget.initialCalendarMode) {
      _mode = widget.initialCalendarMode;
    }
    if (!DateUtils.isSameDay(widget.initialDate, oldWidget.initialDate)) {
      _currentDisplayedMonthDate = DateTime(widget.initialDate.year, widget.initialDate.month);
      _selectedDate = widget.initialDate;
    }
179 180 181 182 183
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
184 185 186
    assert(debugCheckHasMaterial(context));
    assert(debugCheckHasMaterialLocalizations(context));
    assert(debugCheckHasDirectionality(context));
187
    _localizations = MaterialLocalizations.of(context);
188
    _textDirection = Directionality.of(context);
189 190 191 192 193 194 195 196 197 198
    if (!_announcedInitialDate) {
      _announcedInitialDate = true;
      SemanticsService.announce(
        _localizations.formatFullDate(_selectedDate),
        _textDirection,
      );
    }
  }

  void _vibrate() {
199
    switch (Theme.of(context).platform) {
200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        HapticFeedback.vibrate();
        break;
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
        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 _handleMonthChanged(DateTime date) {
    setState(() {
232
      if (_currentDisplayedMonthDate.year != date.year || _currentDisplayedMonthDate.month != date.month) {
233
        _currentDisplayedMonthDate = DateTime(date.year, date.month);
234
        widget.onDisplayedMonthChanged?.call(_currentDisplayedMonthDate);
235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257
      }
    });
  }

  void _handleYearChanged(DateTime value) {
    _vibrate();

    if (value.isBefore(widget.firstDate)) {
      value = widget.firstDate;
    } else if (value.isAfter(widget.lastDate)) {
      value = widget.lastDate;
    }

    setState(() {
      _mode = DatePickerMode.day;
      _handleMonthChanged(value);
    });
  }

  void _handleDayChanged(DateTime value) {
    _vibrate();
    setState(() {
      _selectedDate = value;
258
      widget.onDateChanged(_selectedDate);
259 260 261 262
    });
  }

  Widget _buildPicker() {
263
    switch (_mode) {
264 265 266 267
      case DatePickerMode.day:
        return _MonthPicker(
          key: _monthPickerKey,
          initialMonth: _currentDisplayedMonthDate,
268
          currentDate: widget.currentDate,
269 270 271 272 273 274 275 276 277 278
          firstDate: widget.firstDate,
          lastDate: widget.lastDate,
          selectedDate: _selectedDate,
          onChanged: _handleDayChanged,
          onDisplayedMonthChanged: _handleMonthChanged,
          selectableDayPredicate: widget.selectableDayPredicate,
        );
      case DatePickerMode.year:
        return Padding(
          padding: const EdgeInsets.only(top: _subHeaderHeight),
279
          child: YearPicker(
280
            key: _yearPickerKey,
281
            currentDate: widget.currentDate,
282 283
            firstDate: widget.firstDate,
            lastDate: widget.lastDate,
284
            initialDate: _currentDisplayedMonthDate,
285 286 287 288 289 290 291 292 293
            selectedDate: _selectedDate,
            onChanged: _handleYearChanged,
          ),
        );
    }
  }

  @override
  Widget build(BuildContext context) {
294 295 296
    assert(debugCheckHasMaterial(context));
    assert(debugCheckHasMaterialLocalizations(context));
    assert(debugCheckHasDirectionality(context));
297 298
    return Stack(
      children: <Widget>[
299 300 301
        SizedBox(
          height: _subHeaderHeight + _maxDayPickerHeight,
          child: _buildPicker(),
302 303 304
        ),
        // Put the mode toggle button on top so that it won't be covered up by the _MonthPicker
        _DatePickerModeToggleButton(
305 306
          mode: _mode,
          title: _localizations.formatMonthYear(_currentDisplayedMonthDate),
307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322
          onTitlePressed: () {
            // Toggle the day/year mode.
            _handleModeChanged(_mode == DatePickerMode.day ? DatePickerMode.year : DatePickerMode.day);
          },
        ),
      ],
    );
  }
}

/// A button that used to toggle the [DatePickerMode] for a date picker.
///
/// This appears above the calendar grid and allows the user to toggle the
/// [DatePickerMode] to display either the calendar view or the year list.
class _DatePickerModeToggleButton extends StatefulWidget {
  const _DatePickerModeToggleButton({
323 324 325
    required this.mode,
    required this.title,
    required this.onTitlePressed,
326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341
  });

  /// The current display of the calendar picker.
  final DatePickerMode mode;

  /// The text that displays the current month/year being viewed.
  final String title;

  /// The callback when the title is pressed.
  final VoidCallback onTitlePressed;

  @override
  _DatePickerModeToggleButtonState createState() => _DatePickerModeToggleButtonState();
}

class _DatePickerModeToggleButtonState extends State<_DatePickerModeToggleButton> with SingleTickerProviderStateMixin {
342
  late AnimationController _controller;
343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      value: widget.mode == DatePickerMode.year ? 0.5 : 0,
      upperBound: 0.5,
      duration: const Duration(milliseconds: 200),
      vsync: this,
    );
  }

  @override
  void didUpdateWidget(_DatePickerModeToggleButton oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.mode == widget.mode) {
      return;
    }

    if (widget.mode == DatePickerMode.year) {
      _controller.forward();
    } else {
      _controller.reverse();
    }
  }

  @override
  Widget build(BuildContext context) {
371 372
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    final TextTheme textTheme = Theme.of(context).textTheme;
373 374 375 376 377 378 379 380 381
    final Color controlColor = colorScheme.onSurface.withOpacity(0.60);

    return Container(
      padding: const EdgeInsetsDirectional.only(start: 16, end: 4),
      height: _subHeaderHeight,
      child: Row(
        children: <Widget>[
          Flexible(
            child: Semantics(
382
              label: MaterialLocalizations.of(context).selectYearSemanticsLabel,
383 384
              excludeSemantics: true,
              button: true,
385
              child: SizedBox(
386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433
                height: _subHeaderHeight,
                child: InkWell(
                  onTap: widget.onTitlePressed,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8),
                    child: Row(
                      children: <Widget>[
                        Flexible(
                          child: Text(
                            widget.title,
                            overflow: TextOverflow.ellipsis,
                            style: textTheme.subtitle2?.copyWith(
                              color: controlColor,
                            ),
                          ),
                        ),
                        RotationTransition(
                          turns: _controller,
                          child: Icon(
                            Icons.arrow_drop_down,
                            color: controlColor,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
          if (widget.mode == DatePickerMode.day)
            // Give space for the prev/next month buttons that are underneath this row
            const SizedBox(width: _monthNavButtonsWidth),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

class _MonthPicker extends StatefulWidget {
  /// Creates a month picker.
  _MonthPicker({
434
    super.key,
435 436 437 438 439 440 441
    required this.initialMonth,
    required this.currentDate,
    required this.firstDate,
    required this.lastDate,
    required this.selectedDate,
    required this.onChanged,
    required this.onDisplayedMonthChanged,
442 443 444 445 446 447 448 449
    this.selectableDayPredicate,
  }) : assert(selectedDate != null),
       assert(currentDate != null),
       assert(onChanged != null),
       assert(firstDate != null),
       assert(lastDate != null),
       assert(!firstDate.isAfter(lastDate)),
       assert(!selectedDate.isBefore(firstDate)),
450
       assert(!selectedDate.isAfter(lastDate));
451

452
  /// The initial month to display.
453
  final DateTime initialMonth;
454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477

  /// The current date.
  ///
  /// This date is subtly highlighted in the picker.
  final DateTime currentDate;

  /// The earliest date the user is permitted to pick.
  ///
  /// This date must be on or before the [lastDate].
  final DateTime firstDate;

  /// The latest date the user is permitted to pick.
  ///
  /// This date must be on or after the [firstDate].
  final DateTime lastDate;

  /// The currently selected date.
  ///
  /// This date is highlighted in the picker.
  final DateTime selectedDate;

  /// Called when the user picks a day.
  final ValueChanged<DateTime> onChanged;

478
  /// Called when the user navigates to a new month.
479 480 481
  final ValueChanged<DateTime> onDisplayedMonthChanged;

  /// Optional user supplied predicate function to customize selectable days.
482
  final SelectableDayPredicate? selectableDayPredicate;
483 484

  @override
485
  _MonthPickerState createState() => _MonthPickerState();
486 487 488
}

class _MonthPickerState extends State<_MonthPicker> {
489
  final GlobalKey _pageViewKey = GlobalKey();
490 491
  late DateTime _currentMonth;
  late PageController _pageController;
492
  late MaterialLocalizations _localizations;
493
  late TextDirection _textDirection;
494
  Map<ShortcutActivator, Intent>? _shortcutMap;
495
  Map<Type, Action<Intent>>? _actionMap;
496
  late FocusNode _dayGridFocus;
497
  DateTime? _focusedDay;
498 499 500 501 502

  @override
  void initState() {
    super.initState();
    _currentMonth = widget.initialMonth;
503
    _pageController = PageController(initialPage: DateUtils.monthDelta(widget.firstDate, _currentMonth));
504 505 506 507 508
    _shortcutMap = const <ShortcutActivator, Intent>{
      SingleActivator(LogicalKeyboardKey.arrowLeft): DirectionalFocusIntent(TraversalDirection.left),
      SingleActivator(LogicalKeyboardKey.arrowRight): DirectionalFocusIntent(TraversalDirection.right),
      SingleActivator(LogicalKeyboardKey.arrowDown): DirectionalFocusIntent(TraversalDirection.down),
      SingleActivator(LogicalKeyboardKey.arrowUp): DirectionalFocusIntent(TraversalDirection.up),
509 510 511 512 513 514 515
    };
    _actionMap = <Type, Action<Intent>>{
      NextFocusIntent: CallbackAction<NextFocusIntent>(onInvoke: _handleGridNextFocus),
      PreviousFocusIntent: CallbackAction<PreviousFocusIntent>(onInvoke: _handleGridPreviousFocus),
      DirectionalFocusIntent: CallbackAction<DirectionalFocusIntent>(onInvoke: _handleDirectionFocus),
    };
    _dayGridFocus = FocusNode(debugLabel: 'Day Grid');
516 517 518 519 520
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
521
    _localizations = MaterialLocalizations.of(context);
522
    _textDirection = Directionality.of(context);
523 524
  }

525 526 527
  @override
  void didUpdateWidget(_MonthPicker oldWidget) {
    super.didUpdateWidget(oldWidget);
528
    if (widget.initialMonth != oldWidget.initialMonth && widget.initialMonth != _currentMonth) {
529
      // We can't interrupt this widget build with a scroll, so do it next frame
530
      WidgetsBinding.instance.addPostFrameCallback(
531
        (Duration timeStamp) => _showMonth(widget.initialMonth, jump: true),
532
      );
533 534 535
    }
  }

536 537
  @override
  void dispose() {
538 539
    _pageController.dispose();
    _dayGridFocus.dispose();
540 541 542
    super.dispose();
  }

543 544
  void _handleDateSelected(DateTime selectedDate) {
    _focusedDay = selectedDate;
545
    widget.onChanged(selectedDate);
546 547
  }

548
  void _handleMonthPageChanged(int monthPage) {
549
    setState(() {
550 551
      final DateTime monthDate = DateUtils.addMonthsToMonthDate(widget.firstDate, monthPage);
      if (!DateUtils.isSameMonth(_currentMonth, monthDate)) {
552
        _currentMonth = DateTime(monthDate.year, monthDate.month);
553 554
        widget.onDisplayedMonthChanged(_currentMonth);
        if (_focusedDay != null && !DateUtils.isSameMonth(_focusedDay, _currentMonth)) {
555 556 557
          // We have navigated to a new month with the grid focused, but the
          // focused day is not in this month. Choose a new one trying to keep
          // the same day of the month.
558
          _focusedDay = _focusableDayForMonth(_currentMonth, _focusedDay!.day);
559
        }
560 561 562 563
        SemanticsService.announce(
          _localizations.formatMonthYear(_currentMonth),
          _textDirection,
        );
564 565 566 567 568 569 570 571 572
      }
    });
  }

  /// Returns a focusable date for the given month.
  ///
  /// If the preferredDay is available in the month it will be returned,
  /// otherwise the first selectable day in the month will be returned. If
  /// no dates are selectable in the month, then it will return null.
573
  DateTime? _focusableDayForMonth(DateTime month, int preferredDay) {
574
    final int daysInMonth = DateUtils.getDaysInMonth(month.year, month.month);
575 576 577 578 579 580

    // Can we use the preferred day in this month?
    if (preferredDay <= daysInMonth) {
      final DateTime newFocus = DateTime(month.year, month.month, preferredDay);
      if (_isSelectable(newFocus))
        return newFocus;
581
    }
582 583 584 585 586 587 588 589

    // Start at the 1st and take the first selectable date.
    for (int day = 1; day <= daysInMonth; day++) {
      final DateTime newFocus = DateTime(month.year, month.month, day);
      if (_isSelectable(newFocus))
        return newFocus;
    }
    return null;
590 591
  }

592
  /// Navigate to the next month.
593 594
  void _handleNextMonth() {
    if (!_isDisplayingLastMonth) {
595
      _pageController.nextPage(
596 597 598 599 600 601
        duration: _monthScrollDuration,
        curve: Curves.ease,
      );
    }
  }

602
  /// Navigate to the previous month.
603 604
  void _handlePreviousMonth() {
    if (!_isDisplayingFirstMonth) {
605
      _pageController.previousPage(
606 607 608 609 610 611
        duration: _monthScrollDuration,
        curve: Curves.ease,
      );
    }
  }

612
  /// Navigate to the given month.
613 614 615 616 617
  void _showMonth(DateTime month, { bool jump = false}) {
    final int monthPage = DateUtils.monthDelta(widget.firstDate, month);
    if (jump) {
      _pageController.jumpToPage(monthPage);
    } else {
618 619
      _pageController.animateToPage(
        monthPage,
620
        duration: _monthScrollDuration,
621
        curve: Curves.ease,
622 623
      );
    }
624 625
  }

626 627
  /// True if the earliest allowable month is displayed.
  bool get _isDisplayingFirstMonth {
628
    return !_currentMonth.isAfter(
629 630 631 632 633 634
      DateTime(widget.firstDate.year, widget.firstDate.month),
    );
  }

  /// True if the latest allowable month is displayed.
  bool get _isDisplayingLastMonth {
635
    return !_currentMonth.isBefore(
636 637 638 639
      DateTime(widget.lastDate.year, widget.lastDate.month),
    );
  }

640 641 642 643
  /// Handler for when the overall day grid obtains or loses focus.
  void _handleGridFocusChange(bool focused) {
    setState(() {
      if (focused && _focusedDay == null) {
644
        if (DateUtils.isSameMonth(widget.selectedDate, _currentMonth)) {
645
          _focusedDay = widget.selectedDate;
646 647
        } else if (DateUtils.isSameMonth(widget.currentDate, _currentMonth)) {
          _focusedDay = _focusableDayForMonth(_currentMonth, widget.currentDate.day);
648
        } else {
649
          _focusedDay = _focusableDayForMonth(_currentMonth, 1);
650 651 652 653 654 655 656
        }
      }
    });
  }

  /// Move focus to the next element after the day grid.
  void _handleGridNextFocus(NextFocusIntent intent) {
657 658
    _dayGridFocus.requestFocus();
    _dayGridFocus.nextFocus();
659 660 661 662
  }

  /// Move focus to the previous element before the day grid.
  void _handleGridPreviousFocus(PreviousFocusIntent intent) {
663 664
    _dayGridFocus.requestFocus();
    _dayGridFocus.previousFocus();
665 666 667 668 669 670 671 672 673 674 675 676 677 678
  }

  /// Move the internal focus date in the direction of the given intent.
  ///
  /// This will attempt to move the focused day to the next selectable day in
  /// the given direction. If the new date is not in the current month, then
  /// the page view will be scrolled to show the new date's month.
  ///
  /// For horizontal directions, it will move forward or backward a day (depending
  /// on the current [TextDirection]). For vertical directions it will move up and
  /// down a week at a time.
  void _handleDirectionFocus(DirectionalFocusIntent intent) {
    assert(_focusedDay != null);
    setState(() {
679
      final DateTime? nextDate = _nextDateInDirection(_focusedDay!, intent.direction);
680 681
      if (nextDate != null) {
        _focusedDay = nextDate;
682
        if (!DateUtils.isSameMonth(_focusedDay, _currentMonth)) {
683
          _showMonth(_focusedDay!);
684 685 686 687 688
        }
      }
    });
  }

689 690 691 692 693
  static const Map<TraversalDirection, int> _directionOffset = <TraversalDirection, int>{
    TraversalDirection.up: -DateTime.daysPerWeek,
    TraversalDirection.right: 1,
    TraversalDirection.down: DateTime.daysPerWeek,
    TraversalDirection.left: -1,
694 695
  };

696
  int _dayDirectionOffset(TraversalDirection traversalDirection, TextDirection textDirection) {
697 698 699 700 701 702 703
    // Swap left and right if the text direction if RTL
    if (textDirection == TextDirection.rtl) {
      if (traversalDirection == TraversalDirection.left)
        traversalDirection = TraversalDirection.right;
      else if (traversalDirection == TraversalDirection.right)
        traversalDirection = TraversalDirection.left;
    }
704
    return _directionOffset[traversalDirection]!;
705 706
  }

707
  DateTime? _nextDateInDirection(DateTime date, TraversalDirection direction) {
708
    final TextDirection textDirection = Directionality.of(context);
709
    DateTime nextDate = DateUtils.addDaysToDate(date, _dayDirectionOffset(direction, textDirection));
710 711 712 713
    while (!nextDate.isBefore(widget.firstDate) && !nextDate.isAfter(widget.lastDate)) {
      if (_isSelectable(nextDate)) {
        return nextDate;
      }
714
      nextDate = DateUtils.addDaysToDate(nextDate, _dayDirectionOffset(direction, textDirection));
715 716 717 718 719
    }
    return null;
  }

  bool _isSelectable(DateTime date) {
720
    return widget.selectableDayPredicate == null || widget.selectableDayPredicate!.call(date);
721 722
  }

723
  Widget _buildItems(BuildContext context, int index) {
724
    final DateTime month = DateUtils.addMonthsToMonthDate(widget.firstDate, index);
725 726 727 728
    return _DayPicker(
      key: ValueKey<DateTime>(month),
      selectedDate: widget.selectedDate,
      currentDate: widget.currentDate,
729
      onChanged: _handleDateSelected,
730 731 732 733 734 735 736 737 738
      firstDate: widget.firstDate,
      lastDate: widget.lastDate,
      displayedMonth: month,
      selectableDayPredicate: widget.selectableDayPredicate,
    );
  }

  @override
  Widget build(BuildContext context) {
739
    final Color controlColor = Theme.of(context).colorScheme.onSurface.withOpacity(0.60);
740 741 742 743 744 745 746 747 748 749 750 751 752

    return Semantics(
      child: Column(
        children: <Widget>[
          Container(
            padding: const EdgeInsetsDirectional.only(start: 16, end: 4),
            height: _subHeaderHeight,
            child: Row(
              children: <Widget>[
                const Spacer(),
                IconButton(
                  icon: const Icon(Icons.chevron_left),
                  color: controlColor,
753
                  tooltip: _isDisplayingFirstMonth ? null : _localizations.previousMonthTooltip,
754 755 756 757 758
                  onPressed: _isDisplayingFirstMonth ? null : _handlePreviousMonth,
                ),
                IconButton(
                  icon: const Icon(Icons.chevron_right),
                  color: controlColor,
759
                  tooltip: _isDisplayingLastMonth ? null : _localizations.nextMonthTooltip,
760 761 762 763 764 765
                  onPressed: _isDisplayingLastMonth ? null : _handleNextMonth,
                ),
              ],
            ),
          ),
          Expanded(
766 767 768 769 770 771
            child: FocusableActionDetector(
              shortcuts: _shortcutMap,
              actions: _actionMap,
              focusNode: _dayGridFocus,
              onFocusChange: _handleGridFocusChange,
              child: _FocusedDate(
772
                date: _dayGridFocus.hasFocus ? _focusedDay : null,
773 774 775 776
                child: PageView.builder(
                  key: _pageViewKey,
                  controller: _pageController,
                  itemBuilder: _buildItems,
777
                  itemCount: DateUtils.monthDelta(widget.firstDate, widget.lastDate) + 1,
778
                  onPageChanged: _handleMonthPageChanged,
779 780
                ),
              ),
781 782 783 784 785 786 787 788
            ),
          ),
        ],
      ),
    );
  }
}

789 790 791 792 793 794
/// InheritedWidget indicating what the current focused date is for its children.
///
/// This is used by the [_MonthPicker] to let its children [_DayPicker]s know
/// what the currently focused date (if any) should be.
class _FocusedDate extends InheritedWidget {
  const _FocusedDate({
795
    required super.child,
796
    this.date,
797
  });
798

799
  final DateTime? date;
800 801 802

  @override
  bool updateShouldNotify(_FocusedDate oldWidget) {
803
    return !DateUtils.isSameDay(date, oldWidget.date);
804 805
  }

806 807
  static DateTime? of(BuildContext context) {
    final _FocusedDate? focusedDate = context.dependOnInheritedWidgetOfExactType<_FocusedDate>();
808 809 810 811
    return focusedDate?.date;
  }
}

812 813 814 815
/// 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.
816
class _DayPicker extends StatefulWidget {
817 818
  /// Creates a day picker.
  _DayPicker({
819
    super.key,
820 821 822 823 824 825
    required this.currentDate,
    required this.displayedMonth,
    required this.firstDate,
    required this.lastDate,
    required this.selectedDate,
    required this.onChanged,
826 827 828 829 830 831 832 833 834
    this.selectableDayPredicate,
  }) : assert(currentDate != null),
       assert(displayedMonth != null),
       assert(firstDate != null),
       assert(lastDate != null),
       assert(selectedDate != null),
       assert(onChanged != null),
       assert(!firstDate.isAfter(lastDate)),
       assert(!selectedDate.isBefore(firstDate)),
835
       assert(!selectedDate.isAfter(lastDate));
836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861

  /// 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.
  ///
  /// This date must be on or before the [lastDate].
  final DateTime firstDate;

  /// The latest date the user is permitted to pick.
  ///
  /// This date must be on or after the [firstDate].
  final DateTime lastDate;

  /// The month whose days are displayed by this picker.
  final DateTime displayedMonth;

  /// Optional user supplied predicate function to customize selectable days.
862
  final SelectableDayPredicate? selectableDayPredicate;
863

864 865 866 867 868 869 870
  @override
  _DayPickerState createState() => _DayPickerState();
}

class _DayPickerState extends State<_DayPicker> {

  /// List of [FocusNode]s, one for each day of the month.
871
  late List<FocusNode> _dayFocusNodes;
872 873 874 875

  @override
  void initState() {
    super.initState();
876
    final int daysInMonth = DateUtils.getDaysInMonth(widget.displayedMonth.year, widget.displayedMonth.month);
877 878
    _dayFocusNodes = List<FocusNode>.generate(
      daysInMonth,
879
      (int index) => FocusNode(skipTraversal: true, debugLabel: 'Day ${index + 1}'),
880 881 882 883 884 885 886
    );
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // Check to see if the focused date is in this month, if so focus it.
887
    final DateTime? focusedDate = _FocusedDate.of(context);
888
    if (focusedDate != null && DateUtils.isSameMonth(widget.displayedMonth, focusedDate)) {
889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918
      _dayFocusNodes[focusedDate.day - 1].requestFocus();
    }
  }

  @override
  void dispose() {
    for (final FocusNode node in _dayFocusNodes) {
      node.dispose();
    }
    super.dispose();
  }

  /// 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
  /// ```
919
  List<Widget> _dayHeaders(TextStyle? headerStyle, MaterialLocalizations localizations) {
920 921 922 923 924 925 926 927 928 929 930 931
    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;
  }

932 933
  @override
  Widget build(BuildContext context) {
934
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
935
    final MaterialLocalizations localizations = MaterialLocalizations.of(context);
936
    final TextTheme textTheme = Theme.of(context).textTheme;
937
    final TextStyle? headerStyle = textTheme.caption?.apply(
938 939
      color: colorScheme.onSurface.withOpacity(0.60),
    );
940
    final TextStyle dayStyle = textTheme.caption!;
941 942 943 944 945 946
    final Color enabledDayColor = colorScheme.onSurface.withOpacity(0.87);
    final Color disabledDayColor = colorScheme.onSurface.withOpacity(0.38);
    final Color selectedDayColor = colorScheme.onPrimary;
    final Color selectedDayBackground = colorScheme.primary;
    final Color todayColor = colorScheme.primary;

947 948
    final int year = widget.displayedMonth.year;
    final int month = widget.displayedMonth.month;
949

950 951
    final int daysInMonth = DateUtils.getDaysInMonth(year, month);
    final int dayOffset = DateUtils.firstDayOffset(year, month, localizations);
952

953
    final List<Widget> dayItems = _dayHeaders(headerStyle, localizations);
954 955 956 957 958 959 960 961 962
    // 1-based day of month, e.g. 1-31 for January, and 1-29 for February on
    // a leap year.
    int day = -dayOffset;
    while (day < daysInMonth) {
      day++;
      if (day < 1) {
        dayItems.add(Container());
      } else {
        final DateTime dayToBuild = DateTime(year, month, day);
963 964
        final bool isDisabled = dayToBuild.isAfter(widget.lastDate) ||
            dayToBuild.isBefore(widget.firstDate) ||
965
            (widget.selectableDayPredicate != null && !widget.selectableDayPredicate!(dayToBuild));
966 967
        final bool isSelectedDay = DateUtils.isSameDay(widget.selectedDate, dayToBuild);
        final bool isToday = DateUtils.isSameDay(widget.currentDate, dayToBuild);
968

969
        BoxDecoration? decoration;
970 971 972 973 974 975 976 977 978 979 980
        Color dayColor = enabledDayColor;
        if (isSelectedDay) {
          // The selected day gets a circle background highlight, and a
          // contrasting text color.
          dayColor = selectedDayColor;
          decoration = BoxDecoration(
            color: selectedDayBackground,
            shape: BoxShape.circle,
          );
        } else if (isDisabled) {
          dayColor = disabledDayColor;
981
        } else if (isToday) {
982 983 984 985
          // The current day gets a different text color and a circle stroke
          // border.
          dayColor = todayColor;
          decoration = BoxDecoration(
986
            border: Border.all(color: todayColor),
987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002
            shape: BoxShape.circle,
          );
        }

        Widget dayWidget = Container(
          decoration: decoration,
          child: Center(
            child: Text(localizations.formatDecimal(day), style: dayStyle.apply(color: dayColor)),
          ),
        );

        if (isDisabled) {
          dayWidget = ExcludeSemantics(
            child: dayWidget,
          );
        } else {
1003 1004 1005 1006 1007
          dayWidget = InkResponse(
            focusNode: _dayFocusNodes[day - 1],
            onTap: () => widget.onChanged(dayToBuild),
            radius: _dayPickerRowHeight / 2 + 4,
            splashColor: selectedDayBackground.withOpacity(0.38),
1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049
            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,
              excludeSemantics: true,
              child: dayWidget,
            ),
          );
        }

        dayItems.add(dayWidget);
      }
    }

    return Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: _monthPickerHorizontalPadding,
      ),
      child: GridView.custom(
        physics: const ClampingScrollPhysics(),
        gridDelegate: _dayPickerGridDelegate,
        childrenDelegate: SliverChildListDelegate(
          dayItems,
          addRepaintBoundaries: false,
        ),
      ),
    );
  }
}

class _DayPickerGridDelegate extends SliverGridDelegate {
  const _DayPickerGridDelegate();

  @override
  SliverGridLayout getLayout(SliverConstraints constraints) {
    const int columnCount = DateTime.daysPerWeek;
    final double tileWidth = constraints.crossAxisExtent / columnCount;
1050 1051 1052 1053
    final double tileHeight = math.min(
      _dayPickerRowHeight,
      constraints.viewportMainAxisExtent / (_maxDayPickerRowCount + 1),
    );
1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069
    return SliverGridRegularTileLayout(
      childCrossAxisExtent: tileWidth,
      childMainAxisExtent: tileHeight,
      crossAxisCount: columnCount,
      crossAxisStride: tileWidth,
      mainAxisStride: tileHeight,
      reverseCrossAxis: axisDirectionIsReversed(constraints.crossAxisDirection),
    );
  }

  @override
  bool shouldRelayout(_DayPickerGridDelegate oldDelegate) => false;
}

const _DayPickerGridDelegate _dayPickerGridDelegate = _DayPickerGridDelegate();

1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082
/// A scrollable grid of years to allow picking a year.
///
/// The year picker widget is rarely used directly. Instead, consider using
/// [CalendarDatePicker], or [showDatePicker] which create full date pickers.
///
/// See also:
///
///  * [CalendarDatePicker], which provides a Material Design date picker
///    interface.
///
///  * [showDatePicker], which shows a dialog containing a Material Design
///    date picker.
///
1083
class YearPicker extends StatefulWidget {
1084 1085
  /// Creates a year picker.
  ///
1086
  /// The [firstDate], [lastDate], [selectedDate], and [onChanged]
1087
  /// arguments must be non-null. The [lastDate] must be after the [firstDate].
1088
  YearPicker({
1089
    super.key,
1090
    DateTime? currentDate,
1091 1092
    required this.firstDate,
    required this.lastDate,
1093
    DateTime? initialDate,
1094 1095
    required this.selectedDate,
    required this.onChanged,
1096 1097
    this.dragStartBehavior = DragStartBehavior.start,
  }) : assert(firstDate != null),
1098 1099 1100 1101
       assert(lastDate != null),
       assert(selectedDate != null),
       assert(onChanged != null),
       assert(!firstDate.isAfter(lastDate)),
1102
       currentDate = DateUtils.dateOnly(currentDate ?? DateTime.now()),
1103
       initialDate = DateUtils.dateOnly(initialDate ?? selectedDate);
1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126

  /// The current date.
  ///
  /// This date is subtly highlighted in the picker.
  final DateTime currentDate;

  /// 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 initial date to center the year display around.
  final DateTime initialDate;

  /// 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;

1127 1128 1129
  /// {@macro flutter.widgets.scrollable.dragStartBehavior}
  final DragStartBehavior dragStartBehavior;

1130
  @override
1131
  State<YearPicker> createState() => _YearPickerState();
1132 1133
}

1134
class _YearPickerState extends State<YearPicker> {
1135
  late ScrollController _scrollController;
1136 1137 1138 1139 1140 1141 1142

  // The approximate number of years necessary to fill the available space.
  static const int minYears = 18;

  @override
  void initState() {
    super.initState();
1143 1144
    _scrollController = ScrollController(initialScrollOffset: _scrollOffsetForYear(widget.selectedDate));
  }
1145

1146
  @override
1147
  void didUpdateWidget(YearPicker oldWidget) {
1148 1149 1150 1151 1152 1153 1154 1155
    super.didUpdateWidget(oldWidget);
    if (widget.selectedDate != oldWidget.selectedDate) {
      _scrollController.jumpTo(_scrollOffsetForYear(widget.selectedDate));
    }
  }

  double _scrollOffsetForYear(DateTime date) {
    final int initialYearIndex = date.year - widget.firstDate.year;
1156 1157 1158
    final int initialYearRow = initialYearIndex ~/ _yearPickerColumnCount;
    // Move the offset down by 2 rows to approximately center it.
    final int centeredYearRow = initialYearRow - 2;
1159
    return _itemCount < minYears ? 0 : centeredYearRow * _yearPickerRowHeight;
1160 1161 1162
  }

  Widget _buildYearItem(BuildContext context, int index) {
1163 1164
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    final TextTheme textTheme = Theme.of(context).textTheme;
1165 1166 1167 1168 1169 1170 1171 1172 1173 1174

    // Backfill the _YearPicker with disabled years if necessary.
    final int offset = _itemCount < minYears ? (minYears - _itemCount) ~/ 2 : 0;
    final int year = widget.firstDate.year + index - offset;
    final bool isSelected = year == widget.selectedDate.year;
    final bool isCurrentYear = year == widget.currentDate.year;
    final bool isDisabled = year < widget.firstDate.year || year > widget.lastDate.year;
    const double decorationHeight = 36.0;
    const double decorationWidth = 72.0;

1175
    final Color textColor;
1176 1177 1178 1179 1180 1181 1182 1183 1184
    if (isSelected) {
      textColor = colorScheme.onPrimary;
    } else if (isDisabled) {
      textColor = colorScheme.onSurface.withOpacity(0.38);
    } else if (isCurrentYear) {
      textColor = colorScheme.primary;
    } else {
      textColor = colorScheme.onSurface.withOpacity(0.87);
    }
1185
    final TextStyle? itemStyle = textTheme.bodyText1?.apply(color: textColor);
1186

1187
    BoxDecoration? decoration;
1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209
    if (isSelected) {
      decoration = BoxDecoration(
        color: colorScheme.primary,
        borderRadius: BorderRadius.circular(decorationHeight / 2),
      );
    } else if (isCurrentYear && !isDisabled) {
      decoration = BoxDecoration(
        border: Border.all(
          color: colorScheme.primary,
        ),
        borderRadius: BorderRadius.circular(decorationHeight / 2),
      );
    }

    Widget yearItem = Center(
      child: Container(
        decoration: decoration,
        height: decorationHeight,
        width: decorationWidth,
        child: Center(
          child: Semantics(
            selected: isSelected,
1210
            button: true,
1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223
            child: Text(year.toString(), style: itemStyle),
          ),
        ),
      ),
    );

    if (isDisabled) {
      yearItem = ExcludeSemantics(
        child: yearItem,
      );
    } else {
      yearItem = InkWell(
        key: ValueKey<int>(year),
1224
        onTap: () => widget.onChanged(DateTime(year, widget.initialDate.month)),
1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237
        child: yearItem,
      );
    }

    return yearItem;
  }

  int get _itemCount {
    return widget.lastDate.year - widget.firstDate.year + 1;
  }

  @override
  Widget build(BuildContext context) {
1238
    assert(debugCheckHasMaterial(context));
1239 1240 1241 1242 1243
    return Column(
      children: <Widget>[
        const Divider(),
        Expanded(
          child: GridView.builder(
1244 1245
            controller: _scrollController,
            dragStartBehavior: widget.dragStartBehavior,
1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279
            gridDelegate: _yearPickerGridDelegate,
            itemBuilder: _buildYearItem,
            itemCount: math.max(_itemCount, minYears),
            padding: const EdgeInsets.symmetric(horizontal: _yearPickerPadding),
          ),
        ),
        const Divider(),
      ],
    );
  }
}

class _YearPickerGridDelegate extends SliverGridDelegate {
  const _YearPickerGridDelegate();

  @override
  SliverGridLayout getLayout(SliverConstraints constraints) {
    final double tileWidth =
      (constraints.crossAxisExtent - (_yearPickerColumnCount - 1) * _yearPickerRowSpacing) / _yearPickerColumnCount;
    return SliverGridRegularTileLayout(
      childCrossAxisExtent: tileWidth,
      childMainAxisExtent: _yearPickerRowHeight,
      crossAxisCount: _yearPickerColumnCount,
      crossAxisStride: tileWidth + _yearPickerRowSpacing,
      mainAxisStride: _yearPickerRowHeight,
      reverseCrossAxis: axisDirectionIsReversed(constraints.crossAxisDirection),
    );
  }

  @override
  bool shouldRelayout(_YearPickerGridDelegate oldDelegate) => false;
}

const _YearPickerGridDelegate _yearPickerGridDelegate = _YearPickerGridDelegate();