CODEWITHSUNDEEP
flutter
Nitneuq
Nitneuq

Reputation: 5012

How to change the look of overdue dates with flutter CupertinoDatePicker?

enter image description here

I don't know how to change the grey color of overdue dates. For me there is not enough contrast between past date, future date and today's date.

Upvotes: 2

Views: 473

Answers (2)

jraufeisen
jraufeisen

Reputation: 3877

Looking at the source code of of CupertinoDatePicker, it seems that the colors are not easily changeable.

To quote from flutter's source code:

TextStyle _themeTextStyle(BuildContext context, { bool isValid = true }) {
  final TextStyle style = CupertinoTheme.of(context).textTheme.dateTimePickerTextStyle;
  return isValid
    ? style.copyWith(color: CupertinoDynamicColor.maybeResolve(style.color, context))
    : style.copyWith(color: CupertinoDynamicColor.resolve(CupertinoColors.inactiveGray, context));
}

Therefore, the only direct impact you have on the colors is by wrapping your CupertinoDatePicker inside a CupertinoTheme and providing a value for textTheme.dateTimePickerTextStyle . Further customisation is not supported as of yet

Upvotes: 2

Gwhyyy
Gwhyyy

Reputation: 9166

Since there is no option to change the overlay color from the CupertinoDatePicker widget constructor, you will need to change the overlay color from its source code.

First, we will take an example of CupertinoDatePicker like this:

      // ...
      child: CupertinoDatePicker(
              onDateTimeChanged: (date) {},
            ),
      // ...

And it shows this on the screen:

CupertinoDatePicker

Going inside its source code, you need to search for those lines:

const Widget _startSelectionOverlay = CupertinoPickerDefaultSelectionOverlay(capEndEdge: false);
const Widget _centerSelectionOverlay = CupertinoPickerDefaultSelectionOverlay(capStartEdge: false, capEndEdge: false);
const Widget _endSelectionOverlay = CupertinoPickerDefaultSelectionOverlay(capStartEdge: false);

This represents the implementation of that grey overlay that you see on the screen.

Then, you need to go through the CupertinoPickerDefaultSelectionOverlay source code also, you should find this:

  /// default margin and use rounded corners on the left and right side of the
  /// rectangular overlay.
  /// Default to true and must not be null.
  const CupertinoPickerDefaultSelectionOverlay({
    super.key,
    this.background = CupertinoColors.tertiarySystemFill,
    this.capStartEdge = true,
    this.capEndEdge = true,
  }) : assert(background != null),
       assert(capStartEdge != null),
       assert(capEndEdge != null);

We want to change the color of that overlay background, so in this line:

this.background = CupertinoColors.tertiarySystemFill,

We will change its value with the Color we want, so as an example we will change it like this:

this.background = const Color.fromARGB(49, 0, 253, 30),

and after a hot restart, the result will be:

CupertinoDatePicker


Notes:

  • If you want to use material colors like Colors.red, Colors.green..., you will need to import the material library on the top of that file.
  • You should mark the color with a const as I did in the sample of code, otherwise, you will get an error.

Upvotes: 0

Related Questions