Flutter Question posted in
The official Flutter documentation can be found here.

How to change the color of the selected date in a colorPicker in Flutter?

i am having problems when trying to change the colors of my DatePicker.

That’s how I have it now, I did it with the builder parameter and returning a theme because if I tried to change the datePickerTheme from my appTheme it was very difficult to leave it as I wanted.

final DateTime? pickedDate =
    await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2004),
    lastDate: DateTime(2101),
    builder: (context, child) {
      return Theme(
        data: ThemeData().copyWith(
          colorScheme: const ColorScheme(
            brightness: Brightness.light,
            primary: Color.fromARGB(255, 212, 89, 83),
            onPrimary: Colors.white,
            secondary: Color.fromARGB(255, 0, 28, 49),
            onSecondary: Colors.white,
            error: Colors.red,
            onError: Colors.white,
            surface: Color.fromARGB(255, 0, 28, 49),
            onSurface: Colors.white,
          ), 
        ),
        child: child!
      );
    },
  );

Visually it looks like this:

DatePicker

DatePicker Problem

My problem is that, as you can see in the photo, the text of the date that is manually changed with the keyboard looks black and I want it to look white and I don’t know how to change it, it would be better to use the datePickerTheme but I don’t know how to leave it the same as currently with those parameters and with the theme I can’t change that text.

I tried with the datePickerTheme but i couldn’t set the rest things like is now with Theme.

Tags:

2

Answers


  1. 0 
    final DateTime? pickedDate = await showDatePicker(
          context: context,
          initialDate: DateTime.now(),
          firstDate: DateTime(2004),
          lastDate: DateTime(2101),
          builder: (context, child) {
            return Theme(
                data: ThemeData().copyWith(
                  colorScheme: const ColorScheme(
                    brightness: Brightness.light,
                    primary: Color.fromARGB(255, 212, 89, 83),
                    onPrimary: Colors.white,
                    secondary: Color.fromARGB(255, 0, 28, 49),
                    onSecondary: Colors.white,
                    error: Colors.red,
                    onError: Colors.white,
                    surface: Color.fromARGB(255, 0, 28, 49),
                    onSurface: Colors.white,
                  ),
                  textTheme: ThemeData.light().textTheme.copyWith(
                        bodyLarge: const TextStyle(
                          color: Colors.white,
                        ),
                      ),
                ),
                child: child!);
          },
        );

    I think you will solve your problem with textTheme.

    Here is what the above code looks like: result screenshot

    Login or Signup to reply.
  2. 0

    Try to use theme like below

    final DateTime? pickedDate = await showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime(2004),
                  lastDate: DateTime(2101),
                  builder: (context, child) {
                    return Theme(
                      data: ThemeData(
                        primarySwatch: Colors.grey,
                        colorScheme: ColorScheme.light(
                            primary: Colors.red,
                            onSecondary: Colors.black,
                            onPrimary: Colors.white,
                            surface: Colors.black,
                            onSurface: Colors.white,
                            secondary: Colors.black),
                        dialogBackgroundColor: Colors.white,
                      ),
                      child: child !,
                    );
                  },
                );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search