Changing The Text Color Of Cupertino Date Picker

Question

Attached below is my current code for changing the text color of CupertinoDatePicker:

Container(
                decoration:
                    BoxDecoration(borderRadius: BorderRadius.circular(12)),
                height: MediaQuery.of(context).size.height * 0.18,
                child: CupertinoTheme(
                  data: CupertinoThemeData(
                    textTheme: CupertinoTextThemeData(
                        pickerTextStyle: TextStyle(
                      color: Color(0xffB59CCF),
                    )),
                  ),
                  child: CupertinoDatePicker(

However, the color hasn't changed as shown below:

My theme in main.dart is as follows:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText1: TextStyle(),
          bodyText2: TextStyle(),
        ).apply(
            bodyColor: Colors.white.withOpacity(0.87),
            displayColor: Colors.white.withOpacity(0.87)),
        primaryColor: Colors.white,
        secondaryHeaderColor: Colors.white.withOpacity(0.60),
        backgroundColor: Color(0xff111016),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
              padding: EdgeInsets.all(15),
              shape: CircleBorder(),
              elevation: 6,
              onPrimary: Color(0xff04072E),
              primary: Colors.yellow[100],
              textStyle: TextStyle(fontSize: 21)),
        ),

I'm not sure what is causing the text color of CupertinoDatePicker to be black, but I would like it to change its color. Any help is appreciated! Thanks!

After changing to dateTimePickerTextStyle, the following occurs:

Ferdinand

Answer 1

What you are looking for is the

dateTimePickerTextStyle: TextStyle(color: Colors.white),

This property is part of the CupertinoTextThemeData.

So your code should be like this,

CupertinoTheme(
  data: CupertinoThemeData(
    textTheme: CupertinoTextThemeData(
      dateTimePickerTextStyle: TextStyle(color: Colors.white),
    ),
  ),
  child: CupertinoDatePicker(
    onDateTimeChanged: (_) {},
  ),
)

From the official documentation,

Content texts are shown with CupertinoTextThemeData.dateTimePickerTextStyle.

Heterotrophic

Hi Nisanth, we meet again, thank you for that. The color indeed changed. But everything seems to be crammed tgt now. I've put the photo in the above. – Ferdinand

Hey there. This must be due to some other parent that is giving it some constraints or due to the themes you have defined in your MaterialApp. try removing them one by one and check when it reverts back to normal. I just used the code I gave in my answer and everything is very spacious. – Heterotrophic

got it Nisanth, I changed the fontsize within the dateTimePickerTextStyle – Ferdinand

how about this? #72496507 – Terreverte

Answer 2

Use dateTimePickerTextStyle instead of pickerTextStyle

Here is the working code

          CupertinoTheme(
            data: CupertinoThemeData(
              textTheme: CupertinoTextThemeData(
                dateTimePickerTextStyle: TextStyle(
                  color: Colors.red,
                ),
              ),
            ),
            child: CupertinoDatePicker(
              minimumDate: DateTime.now(),
              minuteInterval: 1,
              mode: CupertinoDatePickerMode.dateAndTime,
              onDateTimeChanged: (DateTime dateTime) {
                print("dateTime: ${dateTime}");
              },
            ),
          );

Please refer CupertinoTextThemeData

Dollie

how about this? #72496507 – Terreverte

Answer 3

            return CupertinoTheme(
                        data: CupertinoThemeData(
                          brightness: Brightness.dark,
                        ),
                        child: Container(
                          height: 200,
                          child: CupertinoDatePicker(
                              backgroundColor: darkColor,
                              initialDateTime: DateTime.now(),
                              maximumDate: new DateTime(2050, 12, 30),
                              minimumYear: 2010,
                              maximumYear: 3000,
                              minuteInterval: 1,
                              mode: CupertinoDatePickerMode.date,
                              use24hFormat: true,
                              onDateTimeChanged: (DateTime newdate) {
                                print(newdate);
                                setState(() {
                                  tanggalController.text =
                                      newdate.formatDateView();
                                });
                              }),
                        ),
                      );

Dendrite

Answer 4

just change the themeData options : cupertinoOverrideTheme

  static final ThemeData dark = ThemeData.dark().copyWith(
  ...
  cupertinoOverrideTheme: const NoDefaultCupertinoThemeData(brightness: Brightness.dark));

Kastner

Answer 5

If you encounter issues of text alignment or text hiding, then do this:

Container(
    margin: const EdgeInsets.all(8),
    width: width * 0.9,
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(12. r)),
    child: CupertinoTheme(data: CupertinoThemeData( // textTheme: CupertinoTextThemeData(

            // dateTimePickerTextStyle: TextStyle(
            // color: themeViewModel.lightMode
            // ? AppColor.blackColor
            // : AppColor.baseWhiteColor),
            // ),
        ),
        child: CupertinoDatePicker(initialDateTime: signupViewModel.selectedDate ?? DateTime.now(),
            onDateTimeChanged: (DateTime newdate) {
                signupViewModel.setDate(newdate);
            }

            ,
            maximumDate: DateTime.now(),
            mode: CupertinoDatePickerMode.date,
        ),
    ),
),

Leila