PremiumOtpInput class

A highly customizable, beautiful, and interactive OTP (One-Time Password) and PIN entry widget for Flutter.

It features rich visual aesthetics, micro-animations, verification loaders, error/success states, and optional security (obscure text) masking.

Inheritance

Constructors

PremiumOtpInput({Key? key, int length = 6, ValueChanged<String>? onChanged, ValueChanged<String>? onCompleted, bool isSuccess = false, bool isError = false, bool isVerifying = false, TextEditingController? controller, FocusNode? focusNode, double boxHeight = 64.0, double spacing = 12.0, double borderRadius = 16.0, Color defaultBorderColor = const Color(0x1FFFFFFF), Color activeBorderColor = const Color(0xFFF97316), Color errorColor = const Color(0xFFEF5350), Color successColor = const Color(0xFF22C55E), Color boxBackgroundColor = const Color(0x801E293B), Color loadingBorderColor = const Color(0xFFF97316), double loadingBorderStrokeWidth = 2.0, Color emptyDotColor = const Color(0x40FFFFFF), double emptyDotSize = 6.0, TextStyle? textStyle, Color successCheckmarkColor = Colors.white, double successCheckmarkSize = 32.0, OtpEntryAnimationStyle entryAnimationStyle = OtpEntryAnimationStyle.scale, OtpSuccessAnimationStyle successAnimationStyle = OtpSuccessAnimationStyle.bounce, bool animateActiveBorder = true, bool obscureText = false, String obscuringCharacter = '●', Widget slotBuilder(BuildContext context, int index, String char, bool isFocused)?})
Creates a PremiumOtpInput widget.
const

Properties

activeBorderColor → Color
The border color when a box is focused.
final
animateActiveBorder → bool
Whether to animate the active border sliding highlight and scale active boxes.
final
borderRadius → double
The border radius of each digit box.
final
boxBackgroundColor → Color
The background fill color of the digit boxes.
final
boxHeight → double
The height of each individual digit box.
final
controller → TextEditingController?
Optional text controller to manage the input text.
final
defaultBorderColor → Color
The border color when a box is unfocused.
final
emptyDotColor → Color
The color of the placeholder dot for empty digits.
final
emptyDotSize → double
The diameter of the placeholder empty dot.
final
entryAnimationStyle → OtpEntryAnimationStyle
The animation style to use when entering a character.
final
errorColor → Color
The border color when isError is true.
final
focusNode → FocusNode?
Optional focus node to manage keyboard focus.
final
hashCode → int
The hash code for this object.
no setterinherited
isError → bool
Highlights the input boxes with the errorColor border.
final
isSuccess → bool
Switches the widget to a completed success checkmark state with an animation.
final
isVerifying → bool
Triggers the active loading border progress indicator during verification.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
length → int
The number of OTP/PIN input boxes (digits).
final
loadingBorderColor → Color
The color of the rotating border progress loader during verification.
final
loadingBorderStrokeWidth → double
The stroke width of the loading border progress loader.
final
obscureText → bool
Whether to obscure the entered characters (e.g. PIN mode).
final
obscuringCharacter → String
The character used to mask the input when obscureText is true.
final
onChanged → ValueChanged<String>?
Callback triggered whenever the entered text changes.
final
onCompleted → ValueChanged<String>?
Callback triggered when all input boxes are filled.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
slotBuilder → Widget Function(BuildContext context, int index, String char, bool isFocused)?
Optional builder function to render custom widgets inside each digit slot.
final
spacing → double
The spacing gap between digit boxes.
final
successAnimationStyle → OtpSuccessAnimationStyle
The animation style to use for the success state transition.
final
successCheckmarkColor → Color
The color of the checkmark in the success state.
final
successCheckmarkSize → double
The size of the checkmark in the success state.
final
successColor → Color
The border color when isSuccess is true.
final
textStyle → TextStyle?
The text style for the entered digits. Defaults to Outfit Bold.
final

Methods

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