JetPinField class

A customizable PIN field widget with built-in validation using Pinput.

This widget provides:

  • PIN/OTP input with customizable length
  • Visual feedback for filled/focused states
  • Built-in validation
  • Customizable appearance and behavior
  • Integrated with Flutter Form Builder
  • Auto-submit functionality

Example usage:

JetPinField(
  name: 'pin',
  length: 6,
  onCompleted: (pin) => print('PIN entered: $pin'),
  onSubmitted: (pin) => submitPin(pin),
)
Inheritance

Constructors

JetPinField({Key? key, required String name, String? initialValue, FormFieldValidator<String>? validator, bool isRequired = true, int length = 6, ValueChanged<String>? onCompleted, ValueChanged<String>? onSubmitted, ValueChanged<String>? onChanged, bool autofocus = false, bool enabled = true, bool obscureText = false, bool showCursor = true, String? hintCharacter, bool readOnly = false, double spacing = 16.0, double? boxWidth, double? boxHeight, BorderRadius? borderRadius, Color? defaultBorderColor, Color? focusedBorderColor, Color? filledBorderColor, Color? submittedBorderColor, Color? errorBorderColor, Color? defaultFillColor, Color? focusedFillColor, Color? filledFillColor, Color? submittedFillColor, Color? errorFillColor, double borderWidth = 2.0, TextStyle? textStyle, TextStyle? hintStyle, TextStyle? errorStyle, Curve animationCurve = Curves.easeInOut, Duration animationDuration = const Duration(milliseconds: 200), bool hapticFeedback = false, bool closeKeyboardWhenCompleted = false, String? errorText, String? helperText, TextStyle? helperStyle})
const

Properties

animationCurve → Curve
Curve for animations
final
animationDuration → Duration
Duration for animations
final
autofocus → bool
Whether to autofocus this field
final
borderRadius → BorderRadius?
Border radius for PIN boxes
final
borderWidth → double
Border width for all states
final
boxHeight → double?
Height of each PIN box
final
boxWidth → double?
Width of each PIN box
final
closeKeyboardWhenCompleted → bool
Close keyboard when completed
final
defaultBorderColor → Color?
Color for default state
final
defaultFillColor → Color?
Background color for default state
final
enabled → bool
Whether the field is enabled
final
errorBorderColor → Color?
Color for error state
final
errorFillColor → Color?
Background color for error state
final
errorStyle → TextStyle?
Text style for error text
final
errorText → String?
Error text to display (if any)
final
filledBorderColor → Color?
Color for filled state
final
filledFillColor → Color?
Background color for filled state
final
focusedBorderColor → Color?
Color for focused state
final
focusedFillColor → Color?
Background color for focused state
final
hapticFeedback → bool
Whether to use haptic feedback
final
hashCode → int
The hash code for this object.
no setterinherited
helperStyle → TextStyle?
Helper text style
final
helperText → String?
Helper text to display below the field
final
hintCharacter → String?
Text to display when PIN box is empty
final
hintStyle → TextStyle?
Text style for hint character
final
initialValue → String?
Initial value for the PIN field
final
isRequired → bool
Whether this field is required
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
length → int
Length of the PIN (number of digits)
final
name → String
The name identifier for this form field
final
obscureText → bool
Whether to obscure the text (for passwords)
final
onChanged → ValueChanged<String>?
Callback when PIN value changes
final
onCompleted → ValueChanged<String>?
Callback when PIN is completed (all digits entered)
final
onSubmitted → ValueChanged<String>?
Callback when PIN is submitted (e.g., via keyboard action)
final
readOnly → bool
Whether to allow multiple lines
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
showCursor → bool
Whether to show cursor
final
spacing → double
Spacing between PIN boxes
final
submittedBorderColor → Color?
Color for submitted state
final
submittedFillColor → Color?
Background color for submitted state
final
textStyle → TextStyle?
Text style for PIN digits
final
validator → FormFieldValidator<String>?
Custom validator function
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<JetPinField>
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
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
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

Operators

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