DatePicker within Calendar does not adhere to theme

[jakobkoerber]

While upgrading both syncfusion_flutter_calendar from 24.2.4 and syncfusion_flutter_datepicker from 24.2.9 to 25.1.35 I observed that the DatePicker header and DatePicker itself within the SfCalendar Widget does not adhere to the app's theme.

24.2.4	25.1.35

While the header can be adjusted with the headerStyle attribute, the DatePicker itself cannot. At least as far as I can tell 😄

Thanks for your help!

[MagTuxGit]

They've added pink colors to the material3 theme:

flutter-widgets/packages/syncfusion_flutter_datepicker/lib/src/date_picker/theme.dart

Lines 69 to 77 in 8f0096c

	@override
	Color? get backgroundColor => colorScheme.brightness == Brightness.light
	? const Color.fromRGBO(238, 232, 244, 1)
	: const Color.fromRGBO(48, 45, 56, 1);
	@override
	Color? get headerBackgroundColor => colorScheme.brightness == Brightness.light
	? const Color.fromRGBO(238, 232, 244, 1)
	: const Color.fromRGBO(48, 45, 56, 1);

I fixed that by adding backgroundColor to my custom theme:

SfDateRangePickerTheme(
  data: SfDateRangePickerThemeData(backgroundColor: Colors.transparent),
  child: SfDateRangePicker(...),
)

[Yuvaraj-Gajaraj]

Hi @jakobkoerber ,

We have provided Material 3 UI theme support to the SfCalendar in our latest Volume 1 2024 main release with 25.1.35. So that the header and date picker color changed to the Flutter Material 3 UI theme. So, you can disable the Material 3 UI theme by wrapping the SfCalendar widget inside the MaterialApp widget and setting the useMaterial3 to false.

Enable Material 3 Theme	Disable Material 3 Theme

Code snippt:

return MaterialApp(
      theme: ThemeData(useMaterial3: false),
      home: Scaffold(
        appBar: AppBar(),
        body: SfCalendar(
          showDatePickerButton: true,
        ),
      ),
    );

[jakobkoerber]

Hi @jakobkoerber ,

We have provided Material 3 UI theme support to the SfCalendar in our latest Volume 1 2024 main release with 25.1.35. So that the header and date picker color changed to the Flutter Material 3 UI theme. So, you can disable the Material 3 UI theme by wrapping the SfCalendar widget inside the MaterialApp widget and setting the useMaterial3 to false.

| Enable Material 3 Theme | Disable Material 3 Theme |

|--------|--------|

| | |

Code snippt:

return MaterialApp(

      theme: ThemeData(useMaterial3: false),

      home: Scaffold(

        appBar: AppBar(),

        body: SfCalendar(

          showDatePickerButton: true,

        ),

      ),

    );

Hey @Yuvaraj-Gajaraj,

thanks for your reply!

This doesn't seem accurate. My app is wrapped in a MaterialApp Widget with useMaterial3 set to true. Yet all other widgets adhere to the material 3 theme customized by me. The SfCalendar header and date picker defaults back to the default purple material 3 theme. There seems to be an issue with the material 3 implementation of 25.1.35.

[MagTuxGit]

@jakobkoerber
Have you checked my comment up there?
You can use SfCalendarTheme and SfDateRangePickerTheme with your backgroundColor.
#1762 (comment)

[jakobkoerber]

@MagTuxGit @Yuvaraj-Gajaraj

Unfortunately this doesn't work even with 25.1.37. Eitherway this seems like a weird developer experience to me having to wrap the SfCalendar widget in a SfCalendarTheme. Why not use the theme that is already defined in the context?

EDIT: Importing syncfusion_flutter_core let's me wrap SfCalendar in a SfCalendarTheme

[Yuvaraj-Gajaraj]

Hi @jakobkoerber ,

Currently, we don't have the option to customize the datePicker background color which occurs when enabling the showDatePickerButton property in the SfCalendar. However, you can achieve this with the help of a custom header and show the date picker in showDialog. We shared the sample below for your reference, you can use this and achieve your requirements.

Screenshot:

Sample:
github_1762.zip

Regards,
Yuvaraj.