Flutter - How to Change Date Picker Color

As you know at Flutter, date picker is one of the popular Widget used in forms or any other place where you need to get the user’s input. But after adding the DatePicker widget and immediately want to change its color. So in this tutorial, we will see how to change DatePicker color,

In this post, I’m going to show you how to change the date picker color in Flutter. Using the Theme widget we can change easily the color of the DatePicker like the below example.

Example : 

showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2015),
    lastDate: DateTime(2035),
    builder: (context, child) {
      return Theme(
        data: Theme.of(context).copyWith(
          colorScheme: ColorScheme.light(
            primary: Colors.red, // Change color here
            onPrimary: Colors.green, // Change color here
            onSurface: Colors.pink, // Change color here
          ),
          textButtonTheme: TextButtonThemeData(
            style: TextButton.styleFrom(
              primary: Colors.blue, // Change color of the button
            ),
          ),
        ),
        child: child!,
      );
    },
  );

 

How to Change Time Picker Color :

Time Picker is also the most usable widget in flutter and we can change easily its color like the below example.

showTimePicker(
                  context: context,
                  initialTime: TimeOfDay(hour: 12, minute: 00),
                  builder: (context, child) {
                    return Theme(
                      data: ThemeData.light().copyWith(
                        colorScheme: ColorScheme.light(
                          primary: Colors.yellow, // we can change the border color from here
                          onSurface: Colors.green, // we can change the text color from here
                        ),
                        buttonTheme: ButtonThemeData(
                          colorScheme: ColorScheme.light(
                            primary: Colors.red,// we can change button colors from here 
                          ),
                        ),
                      ),
                      child: child,
                    );
                  },
                );

I hope it can help you...

 

Tags: