Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter : Change Text Color CupertinoDatePicker in mode Dark Mode

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.

enter image description here

like image 994
Zeffry Reynando Avatar asked Mar 13 '20 02:03

Zeffry Reynando


People also ask

How do you change the text color on flutter text?

Steps. Step 1: Locate the file where you have placed the Text widget. Step 2: Inside the Text widget, add the Style parameter and assign the TextStyle widget. Step 3: Inside the TextStyle widget, add the color parameter and set the color of your choice.

How do you customize CupertinoDatePicker in flutter?

To create a cupertino datepicker in flutter we have to call the constructor of CupertinoDatePicker class and provide the required properties. The cupertino date picker has one required property onDateTimeChanged. This property accepts a callback function that will invoke when the user changes the selection.

How do I change the theme in date picker flutter?

Here's how you do it: Step 1: Inside the showDatePicker function, add the builder paramter. Step 2: Inside the builder parameter, return the Theme widget. Step 3: Inside the Theme widget, add the data property and define the new theme by specifying the colorScheme for the date picker dialog.


2 Answers

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(
          ...
like image 121
Nuqo Avatar answered Nov 15 '22 11:11

Nuqo


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

like image 33
magicleon94 Avatar answered Nov 15 '22 11:11

magicleon94