0

I want to achieve the above design for my showDatePicker.

Right now the button color is white and I want it to be pink.

Is it possible?

Here is what I'm looking for:

enter image description here

Here is my code:

showDatePicker(
      context: context,
      builder: (context, child) {
        return Theme(
          data: ThemeData.light().copyWith(
            colorScheme: const ColorScheme.light(
              primary: Colors.white,
              onPrimary: Colors.black, // header text color
            ),
          ),
          child: child!,
        );
      },
    )
genericUser
  • 4,417
  • 1
  • 28
  • 73

1 Answers1

0

You can make it like this to achieve

    Theme(
      data: Theme.of(context).copyWith(
        colorScheme: const ColorScheme.light(
          primary: Colors.pink,
        ),
        datePickerTheme: const DatePickerThemeData(
          headerBackgroundColor: Colors.white,
          backgroundColor: Colors.white,
          headerForegroundColor: Colors.black,
        ),
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(foregroundColor: Colors.black),
        ),
      ),
      child: child!,
    );
Manish
  • 245
  • 1
  • 7
  • It looks good, but now when I press the "edit" icon (edit as text), the text input is white instead of black. Do you know how to solve it? – genericUser Jul 10 '23 at 14:13
  • `datePickerTheme` is does not exist (maybe deprecated), and also the `headerBackgroundColor` and `headerForegroundColor` of the `timePickerTheme` – genericUser Jul 12 '23 at 08:00