The DatePicker widget in Flutter is one of the most used widgets inside the Form. It is used to get the date input from users. But after adding the DatePicker, you may want to change its default color. So in this tutorial, we’ll see how to change date picker color in Flutter.
Here’s how it looks after changing color:

Here’s what we’ll cover:
Steps to change date picker color in Flutter
You can change the date picker color in Flutter, by adding the builder
parameter and returning the new Theme
widget. Inside the Theme
widget, you can specify the new theme and provide the actual date picker widget inside the child
property.
Here’s how you do it:
Step 1: Inside the showDatePicker
function, add the builder
paramter.
Step 2: Inside the builder
parameter, return the Theme
widget.
Step 3: Inside the Theme
widget, add the data
property and define the new theme by specifying the colorScheme
for the date picker dialog.
Step 4: Provide the child
inside the child
parameter.
Step 5: Run the app.
Code Example
ElevatedButton( onPressed: () => _selectDate(context), child: const Text( 'Show Date Picker', style: TextStyle(fontSize: 24), ), ), //------ _selectDate(BuildContext context) async { final DateTime? selected = await showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime(2010), lastDate: DateTime(2025), builder: (context, child) { return Theme( data: Theme.of(context).copyWith( colorScheme: ColorScheme.light( primary: Colors.amberAccent, // <-- SEE HERE onPrimary: Colors.redAccent, // <-- SEE HERE onSurface: Colors.blueAccent, // <-- SEE HERE ), textButtonTheme: TextButtonThemeData( style: TextButton.styleFrom( primary: Colors.red, // button text color ), ), ), child: child!, ); }, ); }
Are you Interested in exploring more about working with date and time in Flutter? Head over to our blog post on “datetime format” to learn all about the different ways you can format your date and time in Flutter.
Different ways of adding color
There are main three ways you can add color to the date picker widget.
Colors.red
: This is used to define from the predefined colors.Color(0xffF02E65)
: This is used to have a custom color.Color.fromARGB(255, 66, 125, 145)
: This is used to have color from the alpha, red, green, and blue color combination.
Code Example
Theme( data: Theme.of(context).copyWith( colorScheme: ColorScheme.light( primary: Colors.amberAccent, // <-- SEE HERE onPrimary: Color(0xffF02E65), // <-- SEE HERE onSurface: Color.fromARGB(255, 66, 125, 145), // <-- SEE HERE ), textButtonTheme: TextButtonThemeData( style: TextButton.styleFrom( primary: Colors.red, // button text color ), ), ), child: child!, );
Conclusion
In this tutorial, we learned how to change date picker color in Flutter with practical examples. we first saw how to change the color and then learned what are the different ways to add colors.
Would you like to check other interesting Flutter tutorials?