OtpPlusInputs class

otp_plus: A Flutter package providing customizable OTP input widgets.

This widget (OtpPlusInputs) supports multiple OTP input fields with features such as:

  • Paste detection and distribution across fields
  • Obscured input for sensitive codes
  • Flexible styling and layout options…
  • RTL and LTR support with customizable text direction

Usage example:

OtpPlusInputs(
  length: 6,
  shape: OtpFieldShape.square,
  onComplete: (code) {
    log('OTP Entered: $code');
  },
)
Inheritance

Constructors

OtpPlusInputs({Key? key, required OtpFieldShape shape, required int length, bool? enabled, UndoHistoryController? undoController, TextInputAction? textInputAction, TextCapitalization textCapitalization = TextCapitalization.none, TextDirection textDirection = TextDirection.ltr, TextStyle? textStyle, TextStyle? style, StrutStyle? strutStyle, TextAlign textAlign = TextAlign.center, TextAlignVertical textAlignVertical = TextAlignVertical.center, double size = 50, double horizontalSpacing = 10, double verticalSpacing = 10, EdgeInsets? contentPadding, Color cursorColor = Colors.black, double cursorWidth = 1.5, double? cursorHeight, Radius? cursorRadius, bool? cursorOpacityAnimates, bool obscureText = false, String obscuringCharacter = '*', Color? borderColor, Color? focusedBorderColor, Color? errorBorderColor, void onComplete(String code)?, void onChanged(String code)?, void onSubmit(String code)?, bool? ignorePointers, String? pasteText, bool enableAutoFill = false, void onGetSignature(String code)?})
const

Properties

borderColor → Color?
Border color for the input field in its default state.
final
contentPadding → EdgeInsets?
Inner padding of each input field
final
cursorColor → Color
Cursor color
final
cursorHeight → double?
Cursor height
final
cursorOpacityAnimates → bool?
Animate cursor opacity
final
cursorRadius → Radius?
Cursor border radius
final
cursorWidth → double
Cursor width
final
enableAutoFill → bool
Enable/disable sms autofill
final
enabled → bool?
Enable/disable input fields
final
errorBorderColor → Color?
Border color when the input field has an error.
final
focusedBorderColor → Color?
Border color when the input field is focused.
final
hashCode → int
The hash code for this object.
no setterinherited
horizontalSpacing → double
Horizontal spacing between each digit field
final
ignorePointers → bool?
Ignore input events
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
length → int
Total number of digits in the OTP
final
obscureText → bool
Whether to obscure the text (e.g., for passwords)
final
obscuringCharacter → String
Character used when obscuring text
final
onChanged → void Function(String code)?
Called whenever the OTP input changes.
final
onComplete → void Function(String code)?
Called when all OTP digits are completed
final
onGetSignature → void Function(String code)?
Get Signature
final
onSubmit → void Function(String code)?
Provides the final combined code as a String.
final
pasteText → String?
The text for contextMenuBuilder
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
shape → OtpFieldShape
Defines the shape of the OTP input fields (e.g., box, circle).
final
size → double
Width & height of each input box
final
strutStyle → StrutStyle?
Optional strut style override
final
style → TextStyle?
Optional text style override
final
textAlign → TextAlign
Text alignment in each field
final
textAlignVertical → TextAlignVertical
Vertical alignment of the text
final
textCapitalization → TextCapitalization
Capitalization behavior
final
textDirection → TextDirection
Text direction of hole widget(LTR or RTL)
final
textInputAction → TextInputAction?
Action button on keyboard (next/done)
final
textStyle → TextStyle?
Custom text style for each digit
final
undoController → UndoHistoryController?
Undo history controller
final
verticalSpacing → double
Vertical spacing when inputs wrap to the next line
final

Methods

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