How can i change the background color of CupertinoDatePicker

Question

I am using CupertinoDatePicker in my application.

Container(
    height: 200,
    padding: const EdgeInsets.all(16.0),
    child: CupertinoDatePicker(
        mode: CupertinoDatePickerMode.date,
        minimumYear: DateTime.now().year,
        onDateTimeChanged: (DateTime value) {
        print(value);
        },
    )

The application is using the MaterialApp (MaterialTheme). Is there a way to change the background color of CupertinoDatePicker?

This is what I have tried (wrapping the CupertinoDatePicker around CupertinoTheme and set the color to black) and it's not working.

Container(
    height: 200,
    padding: const EdgeInsets.all(16.0),
    child: CupertinoTheme(
        data: CupertinoThemeData(
            primaryColor: Colors.black),
        child: CupertinoDatePicker(
        mode: CupertinoDatePickerMode.date,
        minimumYear: DateTime.now().year,
        onDateTimeChanged: (DateTime value) {
            print(value);
        },
        ),
    ),
)

score 2 · Answer 1 · answered Jun 19 '19 at 18:14

2

At the time of this writing it is not possible and there is a comment in the source code for date_picker.dart that reads:

// Considers setting the default background color from the theme, in the future. const Color _kBackgroundColor = CupertinoColors.white;

answered Jun 19 '19 at 18:14

Matthew

3,411
2
28
28

Yes, I have coped the CupertinoDatePicker class and created a new widget out of it with _kBackgroundColor as CupertinoColors.black – Sawan Kumar Bundelkhandi Jul 18 '19 at 19:24

Vikram Kapoor · Answer 2 · 2019-10-21T09:09:27.270

2

As of this writing Flutter has added backgroundColor property to CupertinoDatePicker on the Master channel. See https://github.com/flutter/flutter/commit/19cdb21cb67acf51fb9b4e4e7a367d0bcd82fc7b#diff-54c54e67345e65bac63291794f109fd1 It's supported in following versions: master (#39056) v1.10.14 v1.10.13 v1.10.12 v1.10.11 v1.10.10 v1.10.9 v1.10.8 v1.10.7 v1.10.6 v1.10.5 v1.10.4 v1.10.3 v1.10.2 v1.10.1 v1.10.0 v1.9.7 v1.9.6

You can set the backgroundColor as follows:

CupertinoTimerPicker(
     backgroundColor: Colors.black,
     initialTimerDuration: timer,
     mode: CupertinoTimerPickerMode.hms,
     onTimerDurationChanged: (Duration newTimer) {
                                       setState(() {
                                       timer = newTimer;
                     });

edited Oct 21 '19 at 09:09

answered Sep 16 '19 at 23:32

Vikram Kapoor

41
1
5

@Virkam Kapoor Can you mention the version from which this is supported? – Jibeex Oct 19 '19 at 14:38
I have updated the answer with the versions supported. – Vikram Kapoor Oct 21 '19 at 09:10
What about the text color? It's not very useful to change the background color if the text color is always grey... We should be able to change the text color to something contrasting with the background color... – Ernesto Dec 23 '19 at 21:07

score 0 · Answer 3 · answered Jan 16 '20 at 03:20

0

If you pick dark theme for your flutter application then the text color of CupertinoDatePicker changes to white

answered Jan 16 '20 at 03:20

Vikram Kapoor

1

How can i change the background color of CupertinoDatePicker

3 Answers3