Question 258052 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to change the background color of date picker

I tried lots of combinations but still can not get a solid opaque white color on the background of this picker.
There is a pinkish blend always.

This is the builder of my showDatePicker method:

builder: (BuildContext context, Widget? child) {
  return Theme(
    data: Theme.of(context).copyWith(
      colorScheme: const ColorScheme.light(
        primary: ThemeColors.crimson,
        onBackground: Colors.white,
      ),
      dialogBackgroundColor: Colors.white,

      datePickerTheme: const DatePickerThemeData(

        headerBackgroundColor: ThemeColors.crimson,
        headerForegroundColor: Colors.white,
        backgroundColor: Colors.white,

enter image description here

In lots of examples the backgroundColor of DatePickerThemeData is suggested to for this. However there is always a pink or red blending that prevents a solid white background.

Tags:

2

Answers


  1. 0

    The color blend on the background of a date picker comes from Material 3, which is enabled for your app (it’s the useMaterial3 option in ThemeData). You can, however, disable this option specifically for your date picker by providing custom builder on the showDatePicker function and wrap the child (which is a DatePickerDialog) with a Theme widget:

    showDatePicker(
  builder: (context, child) {
    return Theme(
      data: ThemeData(useMaterial3: false),
      child: child ?? SizedBox(),
    );
  },
  ...
);

    This will give you the Material 2 date picker dialog which by default has a white background.

    Login or Signup to reply.
  2. 0

    The pink blend comes from surfaceTintColor property of DatePickerThemeData, so you can set it to transparent to have your date picker reflect the actual color of backgroundColor.

    datePickerTheme: DatePickerThemeData(
  surfaceTintColor: Colors.transparent,
  ...
),

    The documentation for Material.surfaceTintColor explains this behavior:

    If ThemeData.useMaterial3 is true and surfaceTintColor is not null and not Colors.transparent, then it will be used to overlay the base color with an opacity based on the elevation.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search