TimeInput class

Optimized Time Input Text Field Component

A specialized text input widget for time entry that provides intuitive user experience with smart cursor positioning, automatic formatting, and robust focus management.

Key Features:

Smart Cursor Positioning: Always places cursor where user taps, even after focus changes
Dual Text Modes: Displays formatted time (HH:MM z/L) when unfocused, digits-only when focused
Automatic Formatting: Converts user input to proper time format on focus loss
Keyboard Navigation: Supports Enter (submit) and Escape (revert) keys
Input Validation: Real-time validation with helpful error messages
Performance Optimized: Uses cached regex patterns and efficient character code checks
Timezone Display: Shows 'z' for UTC, 'L' for local (optional), or no suffix by default

Usage:

TimeInput(
  title: "Start Time",
  time: DateTime.now(),
  onSubmitted: (timeOfDay) => print("Selected: $timeOfDay"),
  onChanged: (timeOfDay) => print("Changed: $timeOfDay"), // Optional
  autoFocus: true, // Optional
  isUtc: false, // Use local time
  showLocalIndicator: true, // Show 'L' for local time
)

Behavior:

On Focus: Shows digits-only text (e.g., "1030" for 10:30)
On Blur: Shows formatted text (e.g., "10:30 z" for UTC, "10:30 ʟ" or "10:30" for local)
On Tap: Positions cursor at equivalent position in digits-only text
On Enter: Formats current input and submits
On Escape: Reverts to original value and submits

Technical Improvements:

Enhanced cursor handling with proper position management
Custom TextInputFormatter for consistent input formatting
Reduced redundant formatting calls with cached regex patterns
Simplified state management with efficient focus tracking
Better focus event handling and cursor positioning
Optimized performance with static regex patterns and character code checks
Cleaner separation of concerns between input and display formatting

Inheritance

Available extensions

Constructors

TimeInput({required String title, required dynamic onSubmitted(TimeOfDay? time), Key? key, DateTime? time, TimeOfDay? defaultTime, bool isUtc = true, bool autoFocus = false, bool replaceAllTextOnAutoFocus = false, dynamic onChanged(TimeOfDay? time)?, InputDecoration? inputDecoration, Map<String, Color>? colorPerTitle, EdgeInsetsGeometry? contentPadding, double? inputFontSize, double? borderRadius, bool isEmptyWhenTimeNull = false, bool showClearButton = false, String? focusRole, bool showLocalIndicator = false}): const

Properties

autoFocus → bool: Whether the input should automatically gain focus when widget is created
final
borderRadius → double?: Optional border radius for the input field
final
colorPerTitle → Map<String, Color>?: Optional color mapping for title styling based on title text
final
contentPadding → EdgeInsetsGeometry?: Optional content padding for the input field
final
defaultTime → TimeOfDay?: final
focusRole → String?: Optional role string used to tag the internal FocusNode for traversal policies.
final
hashCode → int: The hash code for this object.
no setterinherited
inputDecoration → InputDecoration?: Custom input decoration (uses default styling if null)
final
inputFontSize → double?: Optional font size for the input field label
final
isEmptyWhenTimeNull → bool: final
isUtc → bool: Whether the input should automatically gain focus when widget is created
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
makeRefreshable → Widget: Available on Widget?, provided by the WidgetExtension extension
Make your any widget refreshable with RefreshIndicator on top
no setter
onChanged → dynamic Function(TimeOfDay? time)?: Optional callback triggered during text changes while focused Useful for real-time validation or preview
final
onSubmitted → dynamic Function(TimeOfDay? time): Callback triggered when time input is submitted (Enter key or focus loss) Called with the parsed TimeOfDay or null if invalid
final
replaceAllTextOnAutoFocus → bool: Whether the input should automatically gain focus when widget is created
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
showClearButton → bool: final
showLocalIndicator → bool: Whether to show 'ʟ' (small capital L) indicator for local time when isUtc is false If false (default), local time is displayed without suffix (e.g., "12:56") If true, local time is displayed with 'ʟ' suffix (e.g., "12:56 ʟ") UTC time always shows 'z' suffix regardless of this setting
final
time → DateTime?: Initial time value to display (defaults to current time if null)
final
title → String: The label text displayed above the input field
final

Methods

addMaterialWidget() → Material: Available on Widget, provided by the GenericExtensions extension
addTooltipWidget(String toolTip) → Tooltip: Available on Widget, provided by the GenericExtensions extension
animate({Key? key, List<Effect>? effects, AnimateCallback? onInit, AnimateCallback? onPlay, AnimateCallback? onComplete, bool? autoPlay, Duration? delay, AnimationController? controller, Adapter? adapter, double? target, double? value}) → Animate: Available on Widget, provided by the AnimateWidgetExtensions extension
Wraps the target Widget in an Animate instance, and returns the instance for chaining calls. Ex. myWidget.animate() is equivalent to Animate(child: myWidget).
borderRadius([BorderRadiusGeometry? borderRadius]) → Widget: Available on Widget, provided by the GenericExtensions extension
boxDecoration([BoxDecoration? boxDecoration]) → Widget: Available on Widget, provided by the GenericExtensions extension
center({double? heightFactor, double? widthFactor}) → Widget: Available on Widget?, provided by the WidgetExtension extension
set parent widget in center
colorFilter([ColorFilter? colorFilter]) → Widget: Available on Widget, provided by the GenericExtensions extension
set parent widget in center
cornerRadiusWithClipRRect(double radius) → ClipRRect: Available on Widget?, provided by the WidgetExtension extension
add corner radius
cornerRadiusWithClipRRectOnly({int bottomLeft = 0, int bottomRight = 0, int topLeft = 0, int topRight = 0}) → ClipRRect: Available on Widget?, provided by the WidgetExtension extension
add custom corner radius each side
createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<TimeInput>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
expand({int flex = 1}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add Expanded to parent widget
fit({BoxFit? fit, AlignmentGeometry? alignment}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add FittedBox to parent widget
flexible({int flex = 1, FlexFit? fit}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add Flexible to parent widget
launch<T>(BuildContext context, {bool isNewTask = false, PageRouteAnimation? pageRouteAnimation, Duration? duration, String? routeName, Object? routeArguments}) → Future<T?>: Available on Widget?, provided by the WidgetExtension extension
Launch a new screen
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
onTap(Function? function, {BorderRadius? borderRadius, Color? splashColor, Color? hoverColor, Color? highlightColor, Color? focusColor, WidgetStateProperty<Color?>? overlayColor}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add tap to parent widget
opacity({required double opacity, int durationInSecond = 1, Duration? duration}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add opacity to parent widget
paddingAll(double padding) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding all
paddingBottom(double bottom) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding bottom
paddingDirectional({double start = 0.0, double top = 0.0, double end = 0.0, double bottom = 0.0}) → Widget: Available on Widget?, provided by the WidgetExtension extension
paddingLeft(double left) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding left
paddingOnly({double top = 0.0, double left = 0.0, double bottom = 0.0, double right = 0.0}) → Padding: Available on Widget?, provided by the WidgetExtension extension
return custom padding from each side
paddingRight(double right) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding right
paddingSymmetric({double vertical = 0.0, double horizontal = 0.0}) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding symmetric
paddingTop(double top) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding top
rotate({required double angle, bool transformHitTests = true, Offset? origin}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add rotation to parent widget
scale({required double scale, Offset? origin, AlignmentGeometry? alignment, bool transformHitTests = true}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add scaling to parent widget
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
tooltip({required String msg}) → Widget: Available on Widget?, provided by the WidgetExtension extension
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited
translate({required Offset offset, bool transformHitTests = true, Key? key}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add translate to parent widget
validate({Widget value = const SizedBox()}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Validate given widget is not null and returns given value if null.
visible(bool visible, {Widget? defaultWidget}) → Widget: Available on Widget?, provided by the WidgetExtension extension
set visibility
withHeight(double height) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom height
withRoundedCorners({Color backgroundColor = whiteColor, BorderRadius borderRadius = const BorderRadius.all(Radius.circular(8.0)), LinearGradient? gradient, BoxBorder? border, List<BoxShadow>? boxShadow, DecorationImage? decorationImage, BoxShape boxShape = BoxShape.rectangle}) → Container: Available on Widget?, provided by the WidgetExtension extension
withScroll({ScrollPhysics? physics, EdgeInsetsGeometry? padding, Axis scrollDirection = Axis.vertical, ScrollController? controller, DragStartBehavior dragStartBehavior = DragStartBehavior.start, bool? primary, required bool reverse}) → Widget: Available on Widget?, provided by the WidgetExtension extension
withShaderMask(List<Color> colors, {BlendMode blendMode = BlendMode.srcATop}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Wrap with ShaderMask widget
withShaderMaskGradient(Gradient gradient, {BlendMode blendMode = BlendMode.srcATop}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Wrap with ShaderMask widget Gradient
withShadow({Color bgColor = whiteColor, Color shadowColor = Colors.black12, dynamic blurRadius = 10.0, dynamic spreadRadius = 0.0, Offset offset = const Offset(0.0, 0.0), LinearGradient? gradient, BoxBorder? border, DecorationImage? decorationImage, BoxShape boxShape = BoxShape.rectangle}) → Container: Available on Widget?, provided by the WidgetExtension extension
withSize({double width = 0.0, double height = 0.0}) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom height and width
withTooltip({required String msg}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Validate given widget is not null and returns given value if null.
withVisibility(bool visible, {Widget? replacement, bool maintainAnimation = false, bool maintainState = false, bool maintainSize = false, bool maintainSemantics = false, bool maintainInteractivity = false}) → Visibility: Available on Widget?, provided by the WidgetExtension extension
set widget visibility
withWidth(double width) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom width

Operators

operator ==(Object other) → bool: The equality operator.
inherited