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:

score 1 · Accepted Answer · answered May 18 '21 at 04:44

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.

answered May 18 '21 at 04:44

Nisanth Reddy

5,967
1
11
29

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. – VegetaSaiyan May 18 '21 at 09:13
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. – Nisanth Reddy May 18 '21 at 09:36
1

got it Nisanth, I changed the fontsize within the dateTimePickerTextStyle – VegetaSaiyan May 19 '21 at 01:06
how about this? https://stackoverflow.com/questions/72496007/change-text-color-of-cupertinotimerpicker – Zuher Abud Said Jun 03 '22 at 23:33

score 1 · Answer 2 · answered May 18 '21 at 04:45

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

how about this? https://stackoverflow.com/questions/72496007/change-text-color-of-cupertinotimerpicker — Zuher Abud Said, Jun 03 '22 at 23:33

score 1 · Answer 3 · answered Aug 25 '21 at 04:19

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

score 0 · Answer 4 · answered Aug 29 '23 at 11:30

0

just change the themeData options : cupertinoOverrideTheme

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

answered Aug 29 '23 at 11:30

imagination24

1

Changing The Text Color Of Cupertino Date Picker

4 Answers4

Linked