Change Date Picker Color in Flutter  –  RIGHT Way [20233]

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
• Different ways of adding color

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.

1. Colors.red: This is used to define from the predefined colors.
2. Color(0xffF02E65): This is used to have a custom color.
3. 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?