Change DatePicker Colors using Flutter

flutter Date picker came with default blue primary color and white surface.

the default appearance of the date picker is like this:

so how can you customize this color to reflect your identity colors?

the way to change color is very simple just by using Theme widget

this is official docs about theme widget:

Applies a theme to descendant widgets. A theme describes the colors and typographic choices of an application.

so theme widget will describe it’s child colors

showDatePicker function returns an alert containing a date picker widget ,

and there is a optional parameter called builder wich is a fucntion used to customize datepicker widget.

let’s show the steps:

I. inside showDatePicker use parmeter builder

 showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2022),
    lastDate: DateTime(2100),
builder:(context , child){
//  here you can return  a child

}

);

II. inside builder function return Theme widget

builder:(context , child){
//  here you can return  a child
return Theme(data: ,  child: child!   );  // pass child to this child
}

III. now inside Theme widget you can pass ThemeDate to data parameter ,

and it is better to override the default themeDate that in your MaterialApp. You can use the following piece of code:

        data: Theme.of(context).copyWith(  // override MaterialApp ThemeData
          colorScheme: ColorScheme.light(
            primary: Colors.green,  //header and selced day background color
            onPrimary: Colors.white, // titles and 
            onSurface: Colors.black, // Month days , years 
          ),
          textButtonTheme: TextButtonThemeData(
            style: TextButton.styleFrom(
              primary: Colors.black, // ok , cancel    buttons
            ),
          ),
        ),

that’s it :)

thank you for reading.