showPicker function

PageRouteBuilder showPicker({
  1. BuildContext? context,
  2. required TimeOfDay value,
  3. required void onChange(
    1. TimeOfDay
    ),
  4. void onChangeDateTime(
    1. DateTime
    )?,
  5. void onCancel()?,
  6. bool is24HrFormat = false,
  7. Color? accentColor,
  8. Color? unselectedColor,
  9. String cancelText = "Cancel",
  10. String okText = "Ok",
  11. Image? sunAsset,
  12. Image? moonAsset,
  13. bool blurredBackground = false,
  14. bool ltrMode = true,
  15. Color barrierColor = Colors.black45,
  16. double? borderRadius,
  17. double? elevation,
  18. EdgeInsets? dialogInsetPadding = const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),
  19. bool barrierDismissible = true,
  20. bool iosStylePicker = false,
  21. bool displayHeader = true,
  22. String hourLabel = 'hours',
  23. String minuteLabel = 'minutes',
  24. MinuteInterval minuteInterval = MinuteInterval.ONE,
  25. bool disableMinute = false,
  26. bool disableHour = false,
  27. double minMinute = 0,
  28. double maxMinute = 59,
  29. ThemeData? themeData,
  30. bool focusMinutePicker = false,
  31. double minHour = double.infinity,
  32. double maxHour = double.infinity,
  33. TextStyle okStyle = const TextStyle(fontWeight: FontWeight.bold),
  34. TextStyle cancelStyle = const TextStyle(fontWeight: FontWeight.bold),
  35. ButtonStyle? buttonStyle,
  36. ButtonStyle? cancelButtonStyle,
  37. double? buttonsSpacing,
})

The function that shows the DayNightTimePicker

This function takes in the following parameters:

value - Required Display value. It takes in TimeOfDay.

onChange - Required Return the new time the user picked as TimeOfDay.

onChangeDateTime - Return the new time the user picked as DateTime.

onCancel - Custom callback for the Cancel button. Note: if provided, it will override the default behavior of the Cancel button.

is24HrFormat - Show the time in TimePicker in 24 hour format. Defaults to false.

accentColor - Accent color of the TimePicker. Defaults to Theme.of(context).accentColor.

unselectedColor - Color applied unselected options (am/pm, hour/minute). Defaults to Colors.grey.

cancelText - Text displayed for the Cancel button. Defaults to cancel.

okText - Text displayed for the Ok button. Defaults to ok.

sunAsset - Image asset used for the Sun. Default asset provided.

moonAsset - Image asset used for the Moon. Default asset provided.

blurredBackground - Whether to blur the background of the Modal. Defaults to false.

barrierColor - Color of the background of the Modal. Defaults to Colors.black45.

borderRadius - Border radius of the Container in double. Defaults to 10.0.

elevation - Elevation of the Modal in double. Defaults to 12.0.

dialogInsetPadding - Inset padding of the Modal in EdgeInsets. Defaults to EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0).

barrierDismissible - Whether clicking outside should dismiss the Modal. Defaults to true.

iosStylePicker - Whether to display a IOS style picker (Not exactly the same). Defaults to false.

displayHeader - Whether to display the sun moon animation. Defaults to true.

hourLabel - The label to be displayed for hour picker. Only for iosStylePicker. Defaults to 'hours'.

minuteLabel - The label to be displayed for minute picker. Only for iosStylePicker. Defaults to 'minutes'.

minuteInterval - Steps interval while changing minute. Accepts MinuteInterval enum. Defaults to MinuteInterval.ONE.

disableMinute - Disables the minute picker. Defaults to false.

disableHour - Disables the hour picker. Defaults to false.

maxHour - Selectable maximum hour. Defaults to 12 | 23.

maxMinute - Selectable maximum minute. Defaults to 59.

minHour - Selectable minimum hour. Defaults to 0 | 1.

minMinute - Selectable minimum minute. Defaults to 0.

focusMinutePicker - Whether or not the minute picker is auto focus/selected. Defaults to false.

themeData - ThemeData to use for the widget.

okStyle - Ok button's text style. Defaults to const TextStyle(fontWeight: FontWeight.bold).

cancelStyle - Cancel button's text style. Defaults to const TextStyle(fontWeight: FontWeight.bold).

Implementation

PageRouteBuilder showPicker({
  BuildContext? context,
  required TimeOfDay value,
  required void Function(TimeOfDay) onChange,
  void Function(DateTime)? onChangeDateTime,
  void Function()? onCancel,
  bool is24HrFormat = false,
  Color? accentColor,
  Color? unselectedColor,
  String cancelText = "Cancel",
  String okText = "Ok",
  Image? sunAsset,
  Image? moonAsset,
  bool blurredBackground = false,
  bool ltrMode = true,
  Color barrierColor = Colors.black45,
  double? borderRadius,
  double? elevation,
  EdgeInsets? dialogInsetPadding = const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),
  bool barrierDismissible = true,
  bool iosStylePicker = false,
  bool displayHeader = true,
  String hourLabel = 'hours',
  String minuteLabel = 'minutes',
  MinuteInterval minuteInterval = MinuteInterval.ONE,
  bool disableMinute = false,
  bool disableHour = false,
  double minMinute = 0,
  double maxMinute = 59,
  ThemeData? themeData,
  bool focusMinutePicker = false,
  // Infinity is used so that we can assert whether or not the user actually set a value
  double minHour = double.infinity,
  double maxHour = double.infinity,
  TextStyle okStyle = const TextStyle(fontWeight: FontWeight.bold),
  TextStyle cancelStyle = const TextStyle(fontWeight: FontWeight.bold),
  ButtonStyle? buttonStyle,
  ButtonStyle? cancelButtonStyle,
  double? buttonsSpacing,
}) {
  if (minHour == double.infinity) {
    minHour = 0;
  }
  if (maxHour == double.infinity) {
    maxHour = 23;
  }

  assert(!(disableHour == true && disableMinute == true),
      "Both \"disableMinute\" and \"disableHour\" cannot be true.");
  assert(!(disableMinute == true && focusMinutePicker == true),
      "Both \"disableMinute\" and \"focusMinutePicker\" cannot be true.");
  assert(maxMinute <= 59, "\"maxMinute\" must be less than or equal to 59");
  assert(minMinute >= 0, "\"minMinute\" must be greater than or equal to 0");
  assert(maxHour <= 23 && minHour >= 0, "\"minHour\" and \"maxHour\" should be between 0-23");

  final timeValue = Time.fromTimeOfDay(value);

  return PageRouteBuilder(
    pageBuilder: (context, _, __) {
      if (iosStylePicker) {
        return Theme(
          data: themeData ?? Theme.of(context),
          child: const DayNightTimePickerIos(),
        );
      } else {
        return Theme(
          data: themeData ?? Theme.of(context),
          child: const DayNightTimePickerAndroid(),
        );
      }
    },
    transitionDuration: const Duration(milliseconds: 200),
    transitionsBuilder: (context, anim, secondAnim, child) => SlideTransition(
      position: anim.drive(
        Tween(
          begin: const Offset(0, 0.15),
          end: const Offset(0, 0),
        ).chain(
          CurveTween(curve: Curves.ease),
        ),
      ),
      child: FadeTransition(
        opacity: anim,
        child: TimeModelBinding(
          initialTime: timeValue,
          isInlineWidget: false,
          onChange: onChange,
          onChangeDateTime: onChangeDateTime,
          onCancel: onCancel,
          is24HrFormat: is24HrFormat,
          displayHeader: displayHeader,
          accentColor: accentColor,
          unselectedColor: unselectedColor,
          cancelText: cancelText,
          okText: okText,
          sunAsset: sunAsset,
          moonAsset: moonAsset,
          blurredBackground: blurredBackground,
          borderRadius: borderRadius,
          elevation: elevation,
          dialogInsetPadding: dialogInsetPadding,
          minuteInterval: minuteInterval,
          disableMinute: disableMinute,
          disableHour: disableHour,
          maxHour: maxHour,
          maxMinute: maxMinute,
          minHour: minHour,
          minMinute: minMinute,
          focusMinutePicker: focusMinutePicker,
          okStyle: okStyle,
          cancelStyle: cancelStyle,
          buttonStyle: buttonStyle,
          cancelButtonStyle: cancelButtonStyle,
          buttonsSpacing: buttonsSpacing,
          hourLabel: hourLabel,
          minuteLabel: minuteLabel,
          ltrMode: ltrMode,
          child: child,
        ),
      ),
    ),
    barrierDismissible: barrierDismissible,
    opaque: false,
    barrierColor: barrierColor,
  );
}