TogePinWidget class

A customizable PIN input widget that supports masked characters, shake animation, error handling, and auto-masking of input after a delay.

Sample usage:

TogePinWidget(
  pinLabel: 'Enter your PIN',
  errorMessage: 'Invalid PIN',
  pinLength: 4,
  maskChar: '*',
  isDisabled: false,
  onEditingComplete: () => print('Editing complete'),
  onSubmitted: (value) => print('Submitted: $value'),
  onChanged: (value) => print('Changed: $value'),
  onTap: () => print('Tapped'),
  keyboardType: TextInputType.number,
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
)

The widget allows for customization of the number of PIN boxes, the character used to mask the input, and the delay before masking each entered character. It also provides callbacks for various events such as editing completion, submission, and changes to the input value.

The errorMessage property triggers a shake animation when set.

The pinLabel property allows for a label to be displayed above the PIN boxes.

The isDisabled property disables user interaction when set to true.

The textInputAction and textCapitalization properties control the keyboard behavior.

The controller and focusNode properties allow for external management of the PIN input state.

The inputFormatters property allows for custom input formatting.

The keyboardType property allows for customization of the keyboard type.

The onTap property allows for a callback when the user taps on the PIN input.

The onChanged property allows for a callback when the PIN value changes.

The maskDelay property controls the delay before masking each entered character.

The textInputAction property allows for customization of the keyboard action.

The textCapitalization property allows for customization of the text capitalization.

The inputFormatters property allows for custom input formatting.

The keyboardType property allows for customization of the keyboard type.

Inheritance

Constructors

TogePinWidget({Key? key, bool isLoading = false, bool autoFocus = false, TextEditingController? controller, FocusNode? focusNode, String? pinLabel, String? errorMessage, int pinLength = 6, String maskChar = '•', bool isDisabled = false, Duration maskDelay = const Duration(seconds: 1), TextInputType? keyboardType, List<TextInputFormatter>? inputFormatters, TextInputAction? textInputAction, TextCapitalization? textCapitalization, VoidCallback? onEditingComplete, ValueChanged<String>? onSubmitted, VoidCallback? onTap, ValueChanged<String>? onChanged, dynamic onComplete(String value)?})
const

Properties

autoFocus → bool
autoFocus indicates whether the PIN input should automatically gain focus
final
controller → TextEditingController?
The optional controller for managing the PIN input.
final
errorMessage → String?
The optional error message shown below the PIN input. Triggers a shake animation if not null or empty.
final
focusNode → FocusNode?
The optional focus node for managing focus state.
final
hashCode → int
The hash code for this object.
no setterinherited
inputFormatters → List<TextInputFormatter>?
Optional input formatters applied to the input field.
final
isDisabled → bool
Disables user interaction when true.
final
isLoading → bool
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
keyboardType → TextInputType?
The type of keyboard to use for input (e.g., number, text).
final
maskChar → String
The character used to mask PIN input.
final
maskDelay → Duration
The delay before masking each entered character.
final
onChanged → ValueChanged<String>?
Callback triggered when the PIN value changes.
final
onComplete → dynamic Function(String value)?
Optional callback triggered when the PIN input is completed.
final
onEditingComplete → VoidCallback?
The callback triggered when the user finishes editing the PIN.
final
onSubmitted → ValueChanged<String>?
The callback triggered when the user submits the PIN.
final
onTap → VoidCallback?
The callback triggered when the user taps on the PIN input.
final
pinLabel → String?
The optional label displayed above the PIN boxes.
final
pinLength → int
The total number of PIN boxes.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
textCapitalization → TextCapitalization?
The capitalization style for the input text.
final
textInputAction → TextInputAction?
The action to perform when the user submits the PIN.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → TogePinWidgetState
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