Flutter : Change Text Color CupertinoDatePicker in mode Dark Mode

Question

I have CupertinoDatePicker in my application to selected date and time with this code :

formatColumn(
widget: Consumer<MainCalendarProvider>(
 builder: (_, mcProvider, __) => SizedBox(
 height: sizes.height(context) / 3.5,
child: CupertinoDatePicker(
initialDateTime: result['dateRevision'],
 minimumDate: result['dateRevision'],
use24hFormat: true,
onDateTimeChanged: (dateChange) {
mcProvider.setSelectedDateFromCupertinoDatePicker(  dateChange, );},
                                      ),
                                    ),
                                  ),
                                  title: 'Date Activity'),

Everything is work , until i added feature dark mode in my application. In mode dark mode text color CupertinoDatePicker still black , i want change this to white. In CupertinoDatePicker , only have backgroundcolor property. I already try change to Red,Blue,Green etc but the text still black.

How can i change this ?

Thank's.

Hey man, how did you manage to achieve the dark mode? Thanks! — Angel Todorov, Jul 21 '20 at 21:12
@AngelTodorov you should save value of switch (true/false) in local storage (in my app using shared preferences). then you can use this value to toggle brightness property in MaterialApp depend on switch value changed. — Zeffry Reynando, Jul 22 '20 at 00:08
I have no issue changing light to dark and vise versa on any other part of the app but the Cupertino picker - so my question is how did you manage to change both picker backgroundColor and text color? — Angel Todorov, Jul 22 '20 at 09:33
my bad , if you have already change brightness in MaterialApp, depending based on my project it automatically change the background picker. Then for textColor you can follow answer in below , Wrap your picker with `CupertinoTheme` — Zeffry Reynando, Jul 22 '20 at 10:09

score 27 · Answer 1 · answered Nov 22 '20 at 01:40

27

I guess CupertinoTheme gets not overridden with normal Theme, here's how to apply dark mode for CupertinoDatePicker:

CupertinoTheme(
    data: CupertinoThemeData(
        brightness: Brightness.dark,
     ),
     child: CupertinoDatePicker(
          ...

answered Nov 22 '20 at 01:40

Nuqo

3,793
1
25
37

3

Hint: Instead of "Brigtness.dark" you can use Theme.of(context).brightness so that it matches your current theme mode (light/dark). – thilonel Aug 14 '21 at 13:19
This is the perfect solution, worked thanks – Rajesh Jan 20 '22 at 05:26

score 3 · Accepted Answer · answered Mar 13 '20 at 14:08

3

I don't know if you're missing some styles in your Theme, but one of these solutions might do the trick!

answered Mar 13 '20 at 14:08

magicleon94

4,887
2
24
53

score 0 · Answer 3 · answered Feb 15 '23 at 02:08

Youll need to explicitly specify the Brightness to solve this problem.

Static Brightness Mode

Will not change when the operating system brightness mode changes

CupertinoTheme(
    data: CupertinoThemeData(
        brightness: Brightness.dark,
     ),
     child: CupertinoDatePicker(
          ...

Dynamic Brightness Mode

Updates in sync with the operating system brightness mode

CupertinoTheme(
    data: CupertinoThemeData(
        brightness: CupertinoTheme.of(context).brightness,
     ),
     child: CupertinoDatePicker(
          ...

Furthermore, you can apply this theme to your entire app by specifying the data wherever the CupertinoApp is defined:

App-Wide

Define it once and have it apply to the whole app

CupertinoApp(
      theme: const CupertinoThemeData(
          brightness: <insertChoiceHere>,
      ...

Wouldnt mind if this is bumped up as the best answer, since it provides all the detail of the existing ones with a breakdown of options. :D (Trying to get my reputation up!)

Flutter : Change Text Color CupertinoDatePicker in mode Dark Mode

3 Answers3

Static Brightness Mode

Dynamic Brightness Mode

App-Wide