Custom CupertinoDatePicker Flutter

Question

I need to make a CupertinoDatePicker like this:

But I can't change anything except the Background.

I found an answer like this https://stackoverflow.com/a/57830696/16864379

Here's what I got:

But which parameter is responsible for the active color to make it pink? And what parameter is responsible for removing the translucent white backing? Thank you.

score 0 · Answer 1 · answered Dec 10 '21 at 03:44

the CupertinoDatePicker's text and active text use same TextStyle,so can't just change the active color but change both.

return itemPositioningBuilder(
            context,
            Text(
              localizations.datePickerHour(displayHour),
              semanticsLabel: localizations.datePickerHourSemanticsLabel(displayHour),
              style: _themeTextStyle(context, isValid: _isValidHour(selectedAmPm, index)),
            ),
          );

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

change both color

CupertinoTheme(
              data: CupertinoThemeData(
                textTheme: CupertinoTextThemeData(
                  dateTimePickerTextStyle: TextStyle(color: Colors.pink),
                ),
              ),
              child: CupertinoDatePicker(onDateTimeChanged: (_) {}),
            )

Custom CupertinoDatePicker Flutter

1 Answers1