Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ability to customize DatePicker day selection background and overlay shape #144220

Closed
TahaTesser opened this issue Feb 27, 2024 · 2 comments · Fixed by #144317
Closed

Ability to customize DatePicker day selection background and overlay shape #144220

TahaTesser opened this issue Feb 27, 2024 · 2 comments · Fixed by #144317
Assignees
@TahaTesser
Labels
c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter f: material design flutter/packages/flutter/material repository. P2 Important issues not at the top of the work list r: fixed Issue is closed as already fixed in a newer version team-design Owned by Design Languages team triaged-design Triaged by Design Languages team

Comments

@TahaTesser
Copy link
Member

Use case

Currently, you can only customize the date picker dialog shape but not the day selection background and overlay shape.

Screenshot 2024-02-27 at 12 34 38

Proposal

Date picker day selection background and overlay shape should be customizable and be consistent with the dialog shape.

Screenshot 2024-02-27 at 12 32 04
@TahaTesser TahaTesser added in triage Presently being triaged by the triage team c: new feature Nothing broken; request for a new capability f: material design flutter/packages/flutter/material repository. c: proposal A detailed proposal for a change to Flutter team-design Owned by Design Languages team and removed in triage Presently being triaged by the triage team labels Feb 27, 2024
@TahaTesser TahaTesser self-assigned this Feb 27, 2024
@TahaTesser
Copy link
Member Author

I noticed this while fixing day selection overlay size #141350

@TahaTesser TahaTesser mentioned this issue Feb 28, 2024
Merged
9 tasks
@HansMuller HansMuller added P2 Important issues not at the top of the work list triaged-design Triaged by Design Languages team labels Feb 28, 2024
auto-submit bot pushed a commit that referenced this issue Mar 1, 2024
@TahaTesser
Fix CalendarDatePicker day selection shape and overlay (#144317)
ba719bc 
fixes [`DatePickerDialog` date entry hover background and ink splash have different radius](#141350)
fixes [Ability to customize DatePicker day selection background and overlay shape](#144220)

### Code sample

<details>
<summary>expand to view the code sample</summary> 

```dart
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'),
            );
          }),
        ),
      ),
    );
  }
}
```

</details>

### Material DatePicker states specs

![overlay_specs](https://github.com/flutter/flutter/assets/48603081/45ce16cf-7ee9-41e1-a4fa-327de07b78d1)

### Day selection overlay

| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/b529d38d-0232-494b-8bf2-55d28420a245" /> | <img src="https://github.com/flutter/flutter/assets/48603081/c4799559-a7ef-45fd-aed9-aeb386370580"  /> |

### Hover, pressed, highlight preview

| Before | After |
| --------------- | --------------- |
| <video src="https://github.com/flutter/flutter/assets/48603081/8edde82a-7f39-4482-afab-183e1bce5991" /> | <video src="https://github.com/flutter/flutter/assets/48603081/04e1502e-67a4-4b33-973d-463067d70151" /> |

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

| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/a0c85f58-a69b-4e14-a45d-41e580ceedce"  />  | <img src="https://github.com/flutter/flutter/assets/48603081/db67cee1-d28d-4168-98b8-fd7a9cb70cda" /> | 

### Example preview

![Screenshot 2024-02-29 at 15 07 50](https://github.com/flutter/flutter/assets/48603081/3770ed5c-28bf-4d0a-9514-87e1cd2ce515)
@TahaTesser TahaTesser added the r: fixed Issue is closed as already fixed in a newer version label Mar 1, 2024
@github-actions GitHub Actions
Copy link

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 15, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@TahaTesser TahaTesser

Labels
c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter f: material design flutter/packages/flutter/material repository. P2 Important issues not at the top of the work list r: fixed Issue is closed as already fixed in a newer version team-design Owned by Design Languages team triaged-design Triaged by Design Languages team
Projects
Nevercode
Status: Done (PR merged)
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix CalendarDatePicker day selection shape and overlay TahaTesser/flutter
2 participants
@HansMuller @TahaTesser