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:

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.

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

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();
                                });
                              }),
                        ),
                      );

Answer 4

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,
        ),
    ),
),

Answer 5

just change the themeData options : cupertinoOverrideTheme

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