OTPInput class

A widget that displays an OTP input field, with a verification button and a resend link.

The widget allows customization of the OTP input field, verification button, title, and resend functionality.

length specifies the number of OTP input fields. onCompleted is called when the OTP input is completed. onChanged is called when the OTP value changes. borderColor and borderFieldColor define the border colors for the OTP fields. backgroundColor defines the background color of the OTP input fields. fieldWidth and borderRadius define the width and border radius of each OTP input field. textStyle defines the text style used in the OTP input fields. title and subtitle provide the main title and description for the OTP verification. verifyText is the text displayed on the verification button. resendText is the text displayed for the resend option. verifyButtonColor defines the background color of the verify button. errorMessage is the error message displayed if the OTP input is invalid. onResend is a callback function triggered when the resend option is tapped.

Example usage:

OTPInput(
  length: 6,
  onCompleted: (otp) => print("OTP completé : $otp"),
  phoneNumber: "+1234567890",
  verifyText: "Verify",
  resendMessage: "Didn’t receive code? ",
  resendText: "Resend",
  resendTextStyle: TextStyle(
    color: Colors.blue,
    fontSize: 16,
    fontWeight: FontWeight.bold,
    decoration: TextDecoration.underline,
  ),
);
Inheritance

Constructors

OTPInput({Key? key, int length = 6, required ValueChanged<String> onCompleted, ValueChanged<String>? onChanged, Color borderColor = const Color(0xFFE5A048), Color borderFieldColor = const Color(0xFF000000), Color backgroundColor = Colors.white, double fieldWidth = 50, double borderRadius = 12.0, required String phoneNumber, String verifyText = "Verify", String resendText = "Resend", Color verifyButtonColor = const Color(0xFFE5A048), TextStyle textStyle = const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.black), String title = "OTP Verification", String subtitle = "Enter the verification code we just sent to your number", String resendMessage = "Didn’t receive code? ", TextStyle titleStyle = const TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.black), TextStyle subtitleStyle = const TextStyle(fontSize: 16, color: Colors.grey), TextStyle resendStyle = const TextStyle(fontSize: 14, color: Colors.orange, fontWeight: FontWeight.bold), TextStyle resendTextStyle = const TextStyle(fontSize: 16, color: Colors.blue, fontWeight: FontWeight.bold), String errorMessage = "Please fill in all fields.", VoidCallback? onResend})
const

Properties

backgroundColor → Color
The background color of the OTP input fields.
final
borderColor → Color
The border color of the OTP input fields.
final
borderFieldColor → Color
The color of the OTP field's border when not focused.
final
borderRadius → double
The border radius for each OTP input field.
final
errorMessage → String
The error message shown when OTP input is invalid.
final
fieldWidth → double
The width of each OTP input field.
final
hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
length → int
The number of OTP input fields.
final
onChanged → ValueChanged<String>?
Callback that is called when the OTP value changes.
final
onCompleted → ValueChanged<String>
Callback that is called when the OTP input is completed.
final
onResend → VoidCallback?
A callback function triggered when the resend option is tapped.
final
phoneNumber → String
The phone number associated with OTP verification.
final
resendMessage → String
The message shown before the resend text.
final
resendStyle → TextStyle
The style of the resend text.
final
resendText → String
The text displayed for the resend button.
final
resendTextStyle → TextStyle
The custom style for the resend text link.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
subtitle → String
The subtitle text below the title, describing the OTP input process.
final
subtitleStyle → TextStyle
The style of the subtitle text.
final
textStyle → TextStyle
The text style for the OTP input fields.
final
title → String
The main title text above the OTP input fields.
final
titleStyle → TextStyle
The style of the title text.
final
verifyButtonColor → Color
The background color for the verify button.
final
verifyText → String
The text displayed on the verify button.
final

Methods

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