Fix `CalendarDatePicker` day selection shape and overlay #144317

TahaTesser · 2024-02-28T16:15:15Z

fixes DatePickerDialog date entry hover background and ink splash have different radius
fixes Ability to customize DatePicker day selection background and overlay shape

Code sample

expand to view the code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Builder(builder: (context) {
            return FilledButton(
              onPressed: () {
                showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime.utc(2010),
                  lastDate: DateTime.utc(2030),
                );
              },
              child: const Text('Show Date picker'),
            );
          }),
        ),
      ),
    );
  }
}

Material DatePicker states specs

Day selection overlay

Before	After

Hover, pressed, highlight preview

Before	After
before_recording.mov	after_recording.mov

Using `DatePickerThemeData.dayShape` to customize day selection background and overlay shape

Before	After

Example preview

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

HansMuller

LGTM with one small request for additional doc and maybe an example.

HansMuller · 2024-02-28T23:48:10Z

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

Since this property only appears in the theme (which is OK) you should explain how it interacts with dayBorder and dayForegroundColor

You could also include a simple example here and link the same example from todayBorder and dayForegroundColor.

flutter-dashboard · 2024-02-29T13:49:35Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #144317 at sha fcf4d843a214e3f085e764d4faa59c7bee0a22b1

…tter/flutter#144317)

Roll Flutter from e92bca3 to ba719bc (37 revisions) flutter/flutter@e92bca3...ba719bc 2024-03-01 [email protected] Fix `CalendarDatePicker` day selection shape and overlay (flutter/flutter#144317) 2024-03-01 [email protected] Fix chips use square delete button `InkWell` shape instead of circular (flutter/flutter#144319) 2024-03-01 [email protected] InputDecorator M3 tests migration - Step4 - Hint tests (flutter/flutter#144169) 2024-03-01 [email protected] Roll Flutter Engine from f0037d4fbd67 to 2a5a9a6dead0 (1 revision) (flutter/flutter#144468) 2024-03-01 [email protected] Roll Flutter Engine from 16e04d264145 to f0037d4fbd67 (1 revision) (flutter/flutter#144464) 2024-03-01 [email protected] Roll Flutter Engine from 1dff89788b18 to 16e04d264145 (1 revision) (flutter/flutter#144459) 2024-03-01 [email protected] Horizontally expand text selection toolbar buttons in overflow menu (flutter/flutter#144391) 2024-03-01 [email protected] Roll Flutter Engine from f68cc57cbe12 to 1dff89788b18 (2 revisions) (flutter/flutter#144457) 2024-03-01 [email protected] Roll Flutter Engine from 76140bc9cec9 to f68cc57cbe12 (2 revisions) (flutter/flutter#144455) 2024-03-01 [email protected] Roll Flutter Engine from f300ced56a4e to 76140bc9cec9 (1 revision) (flutter/flutter#144453) 2024-03-01 [email protected] Roll Flutter Engine from 34cf95c7bd82 to f300ced56a4e (1 revision) (flutter/flutter#144452) 2024-03-01 [email protected] Roll Flutter Engine from 0db468f7bae5 to 34cf95c7bd82 (1 revision) (flutter/flutter#144450) 2024-03-01 [email protected] Roll Flutter Engine from 6f8044436eb3 to 0db468f7bae5 (3 revisions) (flutter/flutter#144448) 2024-03-01 [email protected] Remove master from API docs (flutter/flutter#144425) 2024-03-01 [email protected] Enable missing-code-block-language (flutter/flutter#144443) 2024-03-01 [email protected] Roll Flutter Engine from 7e8fefe4a084 to 6f8044436eb3 (5 revisions) (flutter/flutter#144436) 2024-02-29 49699333+dependabot[bot]@users.noreply.github.com Bump github/codeql-action from 3.24.5 to 3.24.6 (flutter/flutter#144424) 2024-02-29 [email protected] Reland [a11y] Fix date picker cannot focus on the edit field (flutter/flutter#144198) 2024-02-29 [email protected] Reland "Use dartpad's main channel for master/main docs (#144329)" (flutter/flutter#144431) 2024-02-29 [email protected] Make daemon server work on ipv6-only machines. (flutter/flutter#144359) 2024-02-29 [email protected] Remove deprecated `backgroundColor` from `ThemeData` (flutter/flutter#144079) 2024-02-29 [email protected] Add stateful reordering test for TwoDimensionalViewport (flutter/flutter#142375) 2024-02-29 [email protected] Always use local CanvasKit/Skwasm in benchmarks for better hermeticity. (flutter/flutter#144423) 2024-02-29 [email protected] Roll Flutter Engine from bb6c6a01000f to 7e8fefe4a084 (2 revisions) (flutter/flutter#144419) 2024-02-29 [email protected] Fix a crash in remote device daemon. (flutter/flutter#144358) 2024-02-29 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Use dartpad's main channel for master/main docs (#144329)" (flutter/flutter#144429) 2024-02-29 [email protected] Remove `toggleableActiveColor` from `ThemeData` (flutter/flutter#144178) 2024-02-29 [email protected] Add `FocusNode.focusabilityListenable` (flutter/flutter#144280) 2024-02-29 [email protected] Roll Flutter Engine from 1f24eaa4979d to bb6c6a01000f (2 revisions) (flutter/flutter#144416) 2024-02-29 [email protected] [devicelab] fix motog4 tests and update comment. (flutter/flutter#144410) 2024-02-29 [email protected] Bump dartdocs to 8.0.6 (flutter/flutter#144413) 2024-02-29 [email protected] Use dartpad's main channel for master/main docs (flutter/flutter#144329) 2024-02-29 [email protected] Roll Flutter Engine from 7b3ef43fa7e6 to 1f24eaa4979d (2 revisions) (flutter/flutter#144405) 2024-02-29 [email protected] Roll Flutter Engine from 7dd404724c50 to 7b3ef43fa7e6 (1 revision) (flutter/flutter#144399) 2024-02-29 [email protected] Roll Flutter Engine from 8179b0ed778e to 7dd404724c50 (3 revisions) (flutter/flutter#144395) 2024-02-29 [email protected] Roll Packages from 353086c to 6d02f03 (14 revisions) (flutter/flutter#144393) 2024-02-29 [email protected] Roll Flutter Engine from d068d980f952 to 8179b0ed778e (1 revision) (flutter/flutter#144378) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose ...

…tter/flutter#144317)

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Feb 28, 2024

TahaTesser force-pushed the date_picker_day_selection_overlay branch from 03e197d to 4ad289e Compare February 28, 2024 18:37

TahaTesser marked this pull request as ready for review February 28, 2024 19:23

TahaTesser requested review from HansMuller and gspencergoog February 28, 2024 19:23

HansMuller approved these changes Feb 28, 2024

View reviewed changes

TahaTesser removed the request for review from gspencergoog February 29, 2024 09:49

github-actions bot added d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Feb 29, 2024

flutter-dashboard bot added the will affect goldens Changes to golden files label Feb 29, 2024

Fix CalendarDatePicker day selection shape and overlay

46da138

TahaTesser force-pushed the date_picker_day_selection_overlay branch from fcf4d84 to 46da138 Compare March 1, 2024 09:10

Kick tests

f0ce145

TahaTesser added the autosubmit Merge PR when tree becomes green via auto submit App label Mar 1, 2024

auto-submit bot merged commit ba719bc into flutter:master Mar 1, 2024

TahaTesser deleted the date_picker_day_selection_overlay branch March 1, 2024 12:45

engine-flutter-autoroll mentioned this pull request Mar 1, 2024

Roll Flutter from e92bca3ff5d2 to ba719bc588ed (37 revisions) flutter/packages#6235

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 1, 2024

ba719bc Fix CalendarDatePicker day selection shape and overlay (flu…

3bbd158

…tter/flutter#144317)

HansMuller mentioned this pull request Mar 7, 2024

Flutter Framework Team: Notable Commits #121415

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 14, 2024

ba719bc Fix CalendarDatePicker day selection shape and overlay (flu…

5af030d

…tter/flutter#144317)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix `CalendarDatePicker` day selection shape and overlay #144317

Fix `CalendarDatePicker` day selection shape and overlay #144317

Uh oh!

TahaTesser commented Feb 28, 2024 •

edited

Loading

Uh oh!

HansMuller left a comment •

edited

Loading

Uh oh!

HansMuller Feb 28, 2024 •

edited

Loading

Uh oh!

flutter-dashboard bot commented Feb 29, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix CalendarDatePicker day selection shape and overlay #144317

Fix CalendarDatePicker day selection shape and overlay #144317

Uh oh!

Conversation

TahaTesser commented Feb 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code sample

Material DatePicker states specs

Day selection overlay

Hover, pressed, highlight preview

Using DatePickerThemeData.dayShape to customize day selection background and overlay shape

Example preview

Pre-launch Checklist

Uh oh!

HansMuller left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HansMuller Feb 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

flutter-dashboard bot commented Feb 29, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix `CalendarDatePicker` day selection shape and overlay #144317

Fix `CalendarDatePicker` day selection shape and overlay #144317

TahaTesser commented Feb 28, 2024 •

edited

Loading

Using `DatePickerThemeData.dayShape` to customize day selection background and overlay shape

HansMuller left a comment •

edited

Loading

HansMuller Feb 28, 2024 •

edited

Loading