createInlinePicker function

Widget createInlinePicker({
  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. bool isOnChangeValueMode = false,
  12. bool ltrMode = true,
  13. Image? sunAsset,
  14. Image? moonAsset,
  15. bool blurredBackground = false,
  16. Color barrierColor = Colors.black45,
  17. double? borderRadius,
  18. double? elevation,
  19. EdgeInsets? dialogInsetPadding = const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),
  20. bool barrierDismissible = true,
  21. bool iosStylePicker = false,
  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. bool displayHeader = true,
  30. ThemeData? themeData,
  31. bool focusMinutePicker = false,
  32. double minHour = double.infinity,
  33. double maxHour = double.infinity,
  34. TextStyle okStyle = const TextStyle(fontWeight: FontWeight.bold),
  35. TextStyle cancelStyle = const TextStyle(fontWeight: FontWeight.bold),
  36. ButtonStyle? buttonStyle,
  37. ButtonStyle? cancelButtonStyle,
  38. double? buttonsSpacing,
})

This method is used to render an inline version of the picker.

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.

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/hides the minute picker. Defaults to false.

disableHour - Disables/hides 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.

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

isOnValueChangeMode - Weather to hide okText, cancelText and return value on every onValueChange. Defaults to false.

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

Widget createInlinePicker({
  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",
  bool isOnChangeValueMode = false,
  bool ltrMode = true,
  Image? sunAsset,
  Image? moonAsset,
  bool blurredBackground = false,
  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,
  String hourLabel = 'hours',
  String minuteLabel = 'minutes',
  MinuteInterval minuteInterval = MinuteInterval.ONE,
  bool disableMinute = false,
  bool disableHour = false,
  double minMinute = 0,
  double maxMinute = 59,
  bool displayHeader = true,
  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 TimeModelBinding(
    onChange: onChange,
    onChangeDateTime: onChangeDateTime,
    onCancel: onCancel,
    is24HrFormat: is24HrFormat,
    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,
    isInlineWidget: true,
    displayHeader: displayHeader,
    isOnValueChangeMode: isOnChangeValueMode,
    focusMinutePicker: focusMinutePicker,
    okStyle: okStyle,
    cancelStyle: cancelStyle,
    hourLabel: hourLabel,
    minuteLabel: minuteLabel,
    buttonStyle: buttonStyle,
    cancelButtonStyle: cancelButtonStyle,
    buttonsSpacing: buttonsSpacing,
    ltrMode: ltrMode,
    initialTime: timeValue,
    child: Builder(
      builder: (context) {
        if (iosStylePicker) {
          return Builder(
            builder: (context) {
              return Theme(
                data: themeData ?? Theme.of(context),
                child: const DayNightTimePickerIos(),
              );
            },
          );
        } else {
          return Builder(
            builder: (context) {
              return Theme(
                data: themeData ?? Theme.of(context),
                child: const DayNightTimePickerAndroid(),
              );
            },
          );
        }
      },
    ),
  );
}