Material Date Picker redesign #50546

darrenaustin · 2020-02-11T08:07:57Z

Description

The design for the Material Date Picker has been updated:

https://material.io/components/pickers/#mobile-pickers

This PR updates Flutter's implementation to match the new design.

In addition to just updating the visuals and controls, a new text input mode was added to the dialog as per the design.

The API changes are documented at: https://flutter.dev/go/material-date-picker-redesign

Note that this does not include support for the Date Range picker as that will be coming in a future PR.

Also, credit to @rami-a who implemented a similar internal design that I based this on. However, any problems were introduced by me, so don't blame him :).

Related Issues

Fixes Material design component: mobile date input picker #50133

Tests

The tests in date_picker_test.dart have been updated to test the new UI implementation. Tests for the new text input mode were also added to cover that.

Checklist

Before you create this PR confirm that it meets all requirements listed below by checking the relevant checkboxes ([x]). This will ensure a smooth and quick review process.

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I signed the CLA.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I updated/added relevant documentation (doc comments with ///).
All existing and new tests are passing.
The analyzer (flutter analyze --flutter-repo) does not report any problems on my PR.
I am willing to follow-up on review comments in a timely manner.

Breaking Change

Did any tests fail when you ran them? Please read Handling breaking changes.

No, no existing tests failed, so this is not a breaking change.

Updated the showDatePicker() implementation to use the latest Material design UI.

rami-a

Looks mostly good, comments are pretty minor but noticed a couple of small bugs when testing it out.

Header overflows in landscape mode with text input and keyboard up
Landscape mode should probably cap the width (especially in text input mode), otherwise it looks very wide.
Rotating the device does not maintain the current month the user is viewing, it goes back to the initial month.

packages/flutter/lib/src/material/pickers/date_picker_deprecated.dart

packages/flutter/lib/src/material/pickers/date_picker_header.dart

packages/flutter/lib/src/material/pickers/calendar_date_picker.dart

packages/flutter/test/material/date_picker_test.dart

…in state between orientation changes.

…lays.

…oard up.

darrenaustin · 2020-03-11T06:58:46Z

@rami-a, thanks for the review. I think I have either addressed all your feedback. There are some issues, like customizability which we will deal with in a DatePickerTheme pass in another PR.

Header overflows in landscape mode with text input and keyboard up

Landscape mode should probably cap the width (especially in text input mode), otherwise it looks very wide.

Rotating the device does not maintain the current month the user is viewing, it goes back to the initial month.

These should all be fixed with my latest commits. Please let me know if you see anything else.

packages/flutter/lib/src/material/material_localizations.dart

gspencergoog · 2020-03-12T21:17:00Z

packages/flutter/lib/src/material/pickers/calendar_date_picker.dart

+      ),
+    );
+
+    final Widget dialog = OrientationBuilder(


Why not just return the OrientationBuilder here and not bother creating dialog at all?

gspencergoog · 2020-03-12T21:20:35Z

packages/flutter/lib/src/material/pickers/calendar_date_picker.dart

+class _YearPickerState extends State<_YearPicker> {
+  ScrollController scrollController;
+
+  // The approximate number of years necessary to fill the available space.


Can you explain this a little more? Why is it approximate, not exact, and what available space is it filling?

Not sure :). This was code from @rami-a that I didn't look that closely at. I'll spend some time with it and see if I can get better docs here and your next comment below.

gspencergoog · 2020-03-12T21:21:37Z

packages/flutter/lib/src/material/pickers/calendar_date_picker.dart

+  void initState() {
+    super.initState();
+
+    // Set the scroll position to approximately center the initial year.


Again, why approximate, and when does the approximation get resolved? Is there some kind of step that narrows down the value to the exact value?

gspencergoog · 2020-03-12T21:22:56Z

packages/flutter/lib/src/material/pickers/date_picker_dialog.dart

+/// calendar date picker initially appear in the [DatePickerMode.year] or
+/// [DatePickerMode.day] mode. It defaults to [DatePickerMode.day], and
+/// must be non-null.
+///


Extra line can be removed.

packages/flutter/lib/src/material/pickers/date_picker_dialog.dart

gspencergoog · 2020-03-12T21:24:48Z

packages/flutter/lib/src/material/pickers/date_picker_dialog.dart

+        case DatePickerEntryMode.calendar:
+          _entryMode = DatePickerEntryMode.input;
+          break;
+


nit: don't need the extra line here, IMO.

HansMuller

Mostly small stuff and wordsmithing.

packages/flutter/lib/src/material/material_localizations.dart

HansMuller · 2020-03-12T19:14:01Z

packages/flutter/lib/src/material/material_localizations.dart

+  /// 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.
+  int _getDaysInMonth(int year, int month) {
+    const List<int> daysInMonth = <int>[31, -1, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];


Could move this declaration below the Feb expression

HansMuller · 2020-03-12T21:46:53Z

packages/flutter/lib/src/material/pickers/date_picker_header.dart

+
+  /// The text that is displayed at the center of the header.
+  ///
+  /// This will display the selected date in large typography.


Isn't it displayed in in [titleStyle]?

HansMuller · 2020-03-12T21:51:56Z

packages/flutter/lib/src/material/pickers/date_picker_header.dart

+
+/// Re-usable widget that displays the selected date (in large font) and the
+/// help text above it.
+///


When reading classes like this it's necessary to remember that they're essentially "package private", they're not exported to the material library. Maybe add a boilerplate comment to that effect?

HansMuller · 2020-03-12T23:43:00Z

packages/flutter/lib/src/material/pickers/date_picker_dialog.dart

+/// The returned [Future] resolves to the date selected by the user when the
+/// user confirms the dialog. If the user cancels the dialog, null is returned.
+///
+/// The [initialDate] is the initially shown and selected date in the picker.


This sentence is a little hard to parse.

Maybe something like: When the date picker is first displayed, [initialDate] is selected.

HansMuller · 2020-03-12T23:45:42Z

packages/flutter/lib/src/material/pickers/date_picker_dialog.dart

+///   * [cancelText], label on the cancel button.
+///   * [confirmText], label on the ok button.
+///   * [errorFormatText], message used when the input text isn't in a proper date format.
+///   * [errorInvalidText], message used when the input date isn't a selectable date.


input date => input text

packages/flutter/lib/src/material/pickers/date_picker_dialog.dart

HansMuller · 2020-03-12T23:51:33Z

packages/flutter/lib/src/material/pickers/date_picker_dialog.dart

+    final MaterialLocalizations localizations = MaterialLocalizations.of(context);
+    final Orientation orientation = MediaQuery.of(context).orientation;
+    final TextTheme textTheme = theme.textTheme;
+    final double textScaleFactor = math.min(MediaQuery.of(context).textScaleFactor, 1.3);


This probably merits a brief explanation

HansMuller · 2020-03-12T23:55:25Z

packages/flutter/lib/src/material/pickers/date_picker_dialog.dart

+      ? colorScheme.onPrimary
+      : colorScheme.onSurface;
+    final TextStyle dateStyle = orientation == Orientation.landscape
+      ? textTheme.headline5?.apply(color: dateColor)


Same comment as elsewhere about apply instead of copyWith

- Minor documentation fixes - Switching to copyWith instead of apply for text styles - Optimization in getDaysInMonth

- Simplified the dialog build method. - Replaced the Transform widget with a RotationTransition widget for the year/day mode drop down arrow animation.

… the _MonthPicker to cleanup the controller handling.

darrenaustin · 2020-03-20T21:55:15Z

Mostly small stuff and wordsmithing.

Thanks for the review @HansMuller. Can you take another look with my latest commits?

HansMuller

LGTM

Hixie · 2020-03-24T23:55:58Z

Do we know if this will address #49809 or #49810?

darrenaustin · 2020-03-25T01:46:56Z

Do we know if this will address #49809 or #49810?

Unfortunately, this PR will not address those. They are still on my list. After I land the date range picker I will update them to address #49809. The Time Picker is currently being update by @rami-a and we can look at #49810 after he is finished with that.

nilsreichardt · 2020-03-26T12:29:43Z

Thanks for this great PR, @darrenaustin! For our web app we are on master channel. Yesterday we pushed a new web app update and today we received the first user feedbacks that they love the new date picker 😍

https://web.sharezone.net

ilechcod · 2020-04-20T11:43:10Z

Pls is the new material date picker available for use on flutter now? Do I need to update my current flutter version?

Hixie · 2020-06-10T00:26:01Z

packages/flutter/lib/src/material/pickers/input_date_picker.dart

+      text: filteredValue.text.replaceAll(RegExp(r'[\D]'), separator),
+    );
+  }
+}


@darrenaustin I'm about to check in something that replaces WhitelistingTextInputFormatter and BlacklistingTextInputFormatter with a single FilteringTextInputFormatter that handles replacement even for the case of allow-list filtering, which you might be able to use here.

Hixie · 2020-06-10T00:27:32Z

packages/flutter/lib/src/material/pickers/date_picker_header.dart

+// NOTE: This is an internal implementation file. Even though there are public
+// classes and functions defined here, they are only meant to be used by the
+// date picker implementation and are not exported as part of the Material library.
+// See pickers.dart for exactly what is considered part of the public API.


As a general rule, we should just export everything and support everything as a public API. The reality is that everyone can see everything we do, so they'll just import the files directly if they want to, so we have to consider everything public anyway. I think we should just make everything public rather than start having semi-private APIs like this.

Hixie · 2020-06-10T00:27:48Z

packages/flutter/lib/src/material/pickers/date_picker_header.dart

+import '../text_theme.dart';
+import '../theme.dart';
+
+// NOTE: This is an internal implementation file. Even though there are public


trivial nit: "NOTE" is against our style guide. :-)

googlebot added the cla: yes label Feb 11, 2020

darrenaustin added the work in progress; do not review label Feb 11, 2020

Reprevise mentioned this pull request Feb 17, 2020

Natively support a date range picker #50618

Closed

googlebot added cla: no and removed cla: yes labels Feb 18, 2020

darrenaustin mentioned this pull request Feb 28, 2020

Fix _DatePickerDialog for landscape orientation [small change] #51553

Closed

13 tasks

flutter deleted a comment from googlebot Feb 28, 2020

Date Picker redesign

450427e

Updated the showDatePicker() implementation to use the latest Material design UI.

darrenaustin changed the title ~~WIP: Date picker redesign~~ Material Date Picker redesign Mar 3, 2020

darrenaustin requested review from HansMuller, gspencergoog and rami-a March 3, 2020 20:58

darrenaustin removed the work in progress; do not review label Mar 3, 2020

rami-a reviewed Mar 3, 2020

View reviewed changes

darrenaustin added 5 commits March 3, 2020 15:11

Added a key for the CalendarDatePicker so that the dialog will mainta…

7c742c3

…in state between orientation changes.

Found a better way to reset the screen test size between tests.

aa3d0f7

Doc and other small updates from code review.

b290b87

Fixed the size of the dialog so it doesn't layout weird on large disp…

1397dbd

…lays.

Fixed the landscape input dialog to handle a small size with the keyb…

4e3dc01

…oard up.

gspencergoog reviewed Mar 12, 2020

View reviewed changes

HansMuller reviewed Mar 12, 2020

View reviewed changes

Review comment updates

344db81

- Minor documentation fixes - Switching to copyWith instead of apply for text styles - Optimization in getDaysInMonth

darrenaustin added 5 commits March 17, 2020 14:30

More review updates:

7c290fc

- Simplified the dialog build method. - Replaced the Transform widget with a RotationTransition widget for the year/day mode drop down arrow animation.

Refactored the page controller out of the CalendarDatePicker and into…

b9a3814

… the _MonthPicker to cleanup the controller handling.

Removed some extraneous end-of-line spaces.

c6cec68

Removed some extraneous end-of-line spaces.

262182d

Adding missing dispose of the page controller in _MonthPicker

26126fb

darrenaustin requested a review from HansMuller March 20, 2020 21:55

HansMuller approved these changes Mar 24, 2020

View reviewed changes

darrenaustin merged commit 142b526 into flutter:master Mar 25, 2020

darrenaustin deleted the date_picker_redux branch March 25, 2020 01:45

HansMuller mentioned this pull request Mar 25, 2020

[new_feature] Desktop date pickers for easier picking of a date with single click #53132

Closed

darrenaustin mentioned this pull request Mar 26, 2020

showDatePicker occupying almost the whole screen #46608

Closed

darrenaustin mentioned this pull request Mar 31, 2020

DatePicker handles firstDate incorrectly, does not let respective day be selected #44045

Closed

darrenaustin mentioned this pull request May 8, 2020

Localized new strings added in the redesigned Material Date Picker #56645

Merged

9 tasks

Hixie reviewed Jun 10, 2020

View reviewed changes

github-actions bot locked as resolved and limited conversation to collaborators Jul 30, 2021

Material Date Picker redesign #50546

Material Date Picker redesign #50546

Uh oh!

Conversation

darrenaustin commented Feb 11, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issues

Tests

Checklist

Breaking Change

Uh oh!

rami-a left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

darrenaustin commented Mar 11, 2020

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

darrenaustin commented Mar 20, 2020

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Hixie commented Mar 24, 2020

Uh oh!

darrenaustin commented Mar 25, 2020

Uh oh!

nilsreichardt commented Mar 26, 2020

Uh oh!

ilechcod commented Apr 20, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

darrenaustin commented Feb 11, 2020 •

edited

Loading