[Proposal] Add DatePicker and DateRangePicker Theme

[talamaska]

Use case

Hi, I was itching to get my app look like Material 3 spec. I didn't had any problems changing the border radiuses, font-size, app bar height, some padding, maybe not all of them, but mostly buttons without icons look fine. I have even customized a bit the TimePicker. Mainly changing OutlineBorder or ShapeBorder shapes to some elements, including the border radius of the Dialog. I looked at how can I customize the shape and the border radius of the selected and current dates in the DatePicker. I have found that it's shape is hardcoded in the code and cannot be changed by any means. Currently the DatePicker is a black box. The only thing I could customize is the Dialog radius. No colors, no text styles, no shapes. It is very tricky to rely on the colorScheme only as some parts of the DatePicker are shades of those colors, some other parts are colors with opacity.

Proposal

I would like at least a minimal Theme for the DatePicker and DateRangePicker that gives the possibility to change the shape and the border radius of the selected/ current dates. In the end I would like to be able to customize the DatePicker the same way I can the TimePicker, it has colors, text styles, shapes.

[HansMuller]

CC @darrenaustin

[kirolous-nashaat]

Hi, I would like to work on this. I am working on a PR for initial DatePickerTheme & DatePickerThemeData For now it will only have:

• backgroundColor
• entryModeIconColor
• helpTextStyle
• shape

[talamaska]

So it's the shape of the dialog? That repeats the already existing shape configuration in the DialogTheme. I was focusing more on the shape of the day.

[kirolous-nashaat]

I added the initial foundation for the datepickertheme with the most simple options. but sure, I will add it later this week; the PR wasn't reviewed yet anyway.

[kirolous-nashaat]

@talamaska would something like this be enough?

return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        datePickerTheme: DatePickerThemeData(
          selectedDayDecoration: BoxDecoration(color: Colors.black, shape: BoxShape.circle),
          disabledDayDecoration: BoxDecoration(color: Colors.green, shape: BoxShape.circle),
          todayDecoration: BoxDecoration(color: Colors.red, shape: BoxShape.circle),
        ),
      ),
      home: const MyHomePage(),
    );

Image:

[talamaska]

I would say that if it would be possible to change the color of the shapes, we should also be able to change the color of the numbers, maybe with a color property and a style property separately like the timepicker. Also there is a background between dates when we choose a Date Range. Also would it be possible to set the border Radius using the BoxDecoration? Just wondering if the dates will use the full capacity of the BoxDecoration.

[kirolous-nashaat]

@talamaska

I would say that if it would be possible to change the color of the shapes,

Yes, It's possible as shown in the screenshot.

we should also be able to change the color of the numbers, maybe with a color property and a style property separately like the timepicker.

IDK why both color & style separately ? why time picker theme even do this, instead of just using style (which can override the color) ?

Also there is a background between dates when we choose a Date Range.

I am only working on DatePicker for now not DateRangePicker. maybe later in another PR/Issue.

Also would it be possible to set the border Radius using the BoxDecoration? Just wondering if the dates will use the full capacity of the BoxDecoration.

Yes, all box decoration properties could be used.

[talamaska]

IDK why both color & style separately ? why time picker theme even do this, instead of just using style (which can override the color) ?

Because there is a default text style, for example headline3. https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/time_picker_theme.dart#L147 https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/time_picker_theme.dart#L68 One would want to change only the color, not the whole style.

[kirolous-nashaat]

IDK why both color & style separately ? why time picker theme even do this, instead of just using style (which can override the color) ?

Because there is a default text style, for example headline3. https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/time_picker_theme.dart#L147 https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/time_picker_theme.dart#L68 One would want to change only the color, not the whole style.

Yes but can't we just use Theme.of(....).xxxx.style.copywith(color: mycolor) ?

[talamaska]

You can't use Theme.of when defining a theme. Look here how it is used and defined. In the end if there is a color defined it is passed to the textTheme , the one passed from us in the theme data or the the one from textTheme.headline2 https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/time_picker.dart#L274 https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/time_picker.dart#L286 https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/time_picker.dart#L302

[TheCarpetMerchant]

Is there going to be any follow-up on this ? _MonthItemState._highlightColor has a hardcoded opacity value of 0.12, which prevents me from using this widget because my primary color is barely visible with this opacity on a dark background. It would be useful to get a theme for the picker including the highlight color.