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:

Solution 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.

Solution 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

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

Comments

[VegetaSaiyan]

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.

[Nisanth Reddy]

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.

[VegetaSaiyan]

got it Nisanth, I changed the fontsize within the dateTimePickerTextStyle

[Zuher Abud Said]

how about this? stackoverflow.com/questions/72496007/…

[Zuher Abud Said]

how about this? stackoverflow.com/questions/72496007/…