Question 79728 in Flutter Question posted in
The official Flutter documentation can be found here.

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search