showPlatformTimePicker function

Future<TimeOfDay?> showPlatformTimePicker({
  1. required BuildContext context,
  2. required TimeOfDay initialTime,
  3. Offset? anchorPoint,
  4. Color? barrierColor,
  5. bool? barrierDismissible,
  6. RouteSettings? routeSettings,
  7. bool useRootNavigator = kDefaultUseRootNavigator,
  8. TransitionBuilder? builder,
  9. MaterialTimePickerData? materialTimePickerData,
  10. CupertinoDatePickerData? cupertinoTimePickerData,
})

Shows a platform-adaptive time picker that renders Material showTimePicker on Android and CupertinoDatePicker (in time mode) on iOS.

This function automatically selects the appropriate time picker implementation based on the target platform:

  • On Android: shows a Material Design time picker
  • On iOS: shows a Cupertino date picker configured for time selection

The time picker can be configured with platform-specific data through materialTimePickerData and cupertinoTimePickerData, or with common properties.

Example:

final selectedTime = await showPlatformTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);

Implementation

Future<TimeOfDay?> showPlatformTimePicker({
  required BuildContext context,
  required TimeOfDay initialTime,
  Offset? anchorPoint,
  Color? barrierColor,
  bool? barrierDismissible,
  RouteSettings? routeSettings,
  bool useRootNavigator = kDefaultUseRootNavigator,
  TransitionBuilder? builder,
  MaterialTimePickerData? materialTimePickerData,
  CupertinoDatePickerData? cupertinoTimePickerData,
}) => context.platformLazyValue(
  material: () => showTimePicker(
    context: context,
    initialTime: initialTime,
    anchorPoint: materialTimePickerData?.anchorPoint ?? anchorPoint,
    orientation: materialTimePickerData?.orientation,
    barrierColor: materialTimePickerData?.barrierColor ?? barrierColor,
    barrierDismissible:
        materialTimePickerData?.barrierDismissible ??
        barrierDismissible ??
        kMaterialBarrierDismissible,
    routeSettings: materialTimePickerData?.routeSettings ?? routeSettings,
    onEntryModeChanged: materialTimePickerData?.onEntryModeChanged,
    useRootNavigator: materialTimePickerData?.useRootNavigator ?? useRootNavigator,
    builder: materialTimePickerData?.builder ?? builder,
    initialEntryMode:
        materialTimePickerData?.initialEntryMode ?? MaterialTimePickerData.kDefaultInitialEntryMode,
    helpText: materialTimePickerData?.helpText,
    cancelText: materialTimePickerData?.cancelText,
    confirmText: materialTimePickerData?.confirmText,
    hourLabelText: materialTimePickerData?.hourLabelText,
    minuteLabelText: materialTimePickerData?.minuteLabelText,
    barrierLabel: materialTimePickerData?.barrierLabel,
    errorInvalidText: materialTimePickerData?.errorInvalidText,
    switchToInputEntryModeIcon: materialTimePickerData?.switchToInputEntryModeIcon,
    switchToTimerEntryModeIcon: materialTimePickerData?.switchToTimerEntryModeIcon,
    emptyInitialInput: materialTimePickerData?.emptyInitialInput ?? false,
  ),
  cupertino: () async {
    var selectedDateTime = initialTime.toDateTime();
    final resolvedBuilder = cupertinoTimePickerData?.builder ?? builder;

    final pickerWidget = CupertinoDatePicker(
      initialDateTime: selectedDateTime,
      selectableDayPredicate: cupertinoTimePickerData?.selectableDayPredicate,
      mode: .time,
      onDateTimeChanged: (dateTime) => selectedDateTime = dateTime,
      backgroundColor: cupertinoTimePickerData?.backgroundColor,
      changeReportingBehavior:
          cupertinoTimePickerData?.changeReportingBehavior ??
          ChangeReportingBehavior.onScrollUpdate,
      dateOrder: cupertinoTimePickerData?.dateOrder,
      itemExtent: cupertinoTimePickerData?.itemExtent ?? CupertinoDatePickerData.kDefaultItemExtent,
      maximumYear: cupertinoTimePickerData?.maximumYear,
      minimumYear:
          cupertinoTimePickerData?.minimumYear ?? CupertinoDatePickerData.kDefaultMinimumYear,
      minuteInterval:
          cupertinoTimePickerData?.minuteInterval ?? CupertinoDatePickerData.kDefaultMinuteInterval,
      selectionOverlayBuilder: cupertinoTimePickerData?.selectionOverlayBuilder,
      showDayOfWeek:
          cupertinoTimePickerData?.showDayOfWeek ?? CupertinoDatePickerData.kDefaultShowDayOfWeek,
      showTimeSeparator:
          cupertinoTimePickerData?.showTimeSeparator ??
          CupertinoDatePickerData.kDefaultShowTimeSeparator,
      use24hFormat:
          cupertinoTimePickerData?.use24hFormat ?? CupertinoDatePickerData.kDefaultUse24hFormat,
    );

    await showCupertinoModalPopup<void>(
      context: context,
      anchorPoint: cupertinoTimePickerData?.anchorPoint ?? anchorPoint,
      barrierColor:
          cupertinoTimePickerData?.barrierColor ??
          barrierColor ??
          CupertinoDatePickerData.kDefaultModalBarrierColor,
      barrierDismissible:
          cupertinoTimePickerData?.barrierDismissible ??
          barrierDismissible ??
          kCupertinoBarrierDismissible,
      routeSettings: cupertinoTimePickerData?.routeSettings ?? routeSettings,
      useRootNavigator: cupertinoTimePickerData?.useRootNavigator ?? useRootNavigator,
      filter: cupertinoTimePickerData?.filter,
      requestFocus: cupertinoTimePickerData?.requestFocus,
      semanticsDismissible:
          cupertinoTimePickerData?.semanticsDismissible ??
          CupertinoDatePickerData.kDefaultSemanticsDismissible,
      builder: (context) =>
          resolvedBuilder?.call(context, pickerWidget) ??
          _CupertinoPickerContainer(pickerWidget: pickerWidget),
    );

    return TimeOfDay.fromDateTime(selectedDateTime);
  },
);