Search code examples
androidflutterdatepickermaterial3

How to change color of DatePicker in Material 3 Flutter

I have this class for datepicker:

    DateTime? selectedDate = await showDatePicker(
      context: context,
      initialDate: initialDate ?? DateTime.now(),
      firstDate: firstDate ?? DateTime(1900),
      lastDate: lastDate ?? DateTime.now().add(Duration(days: 3650)),
      builder: (context, child) {
        return Theme(
          data: ThemeData.light().copyWith(
            colorScheme: const ColorScheme.light(
              onPrimary: Colors.white,
              onSurface: Colors.white,
              primary: Color(0xff11619c),
            ),
            dialogBackgroundColor: Color(0xff5994c7),
            dialogTheme: DialogTheme(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16.0),
              ),
            ),
            textButtonTheme: TextButtonThemeData(
              style: TextButton.styleFrom(
                textStyle: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.normal,
                  fontSize: ScreenUtil().setSp(AppSize.textSize12),
                  fontFamily: 'Quicksand',
                ),
                foregroundColor: Colors.white,
                backgroundColor: Color(0xff5994c7),
                // backgroundColor: Color(0xff5994c7),
                shape: RoundedRectangleBorder(
                  side: const BorderSide(
                    color: Colors.transparent,
                    width: 1,
                    style: BorderStyle.solid,
                  ),
                  borderRadius: BorderRadius.circular(50),
                ),
              ),
            ),
          ),
          child: child!,
        );
      },
    );

That was my datepicker before flutter update:

enter image description here

But after update and changed Material 2 to Material 3 the datepicker is:

enter image description here

How i can restore first variant of datepicker?

I tried options from the documentation but it didn't work.

Solution

  • Set a custom DatePickerThemeData to the datePickerTheme property of the ThemeData.

    data: ThemeData.light().copyWith(
  // ...
  datePickerTheme: DatePickerThemeData(
    headerBackgroundColor: Color(0xff11619c),
    backgroundColor: Color(0xff5994c7),
  ),
),

    Tip: Most of the styling options that you need for the date picker are actually in this DatePickerThemeData class.

    Result