MotionOtpInput class
A premium OTP input widget that coordinates focus and the text entry across multiple MotionOtpBox widgets.
The widget implements the full "Instagram style" motion states:
- showLoadingAnimation (verifying) — the boxes scatter out of the row, gather into a circle formation around the center and keep orbiting (each box also spins on itself) for as long as verification runs. The digits stay visible while orbiting. If loading ends without success, the boxes fly back into the row.
- showSuccessAnimation — the orbit collapses: the boxes merge into a single center box, a ring in successColor draws around it with a check mark, and the ring keeps softly pulsing.
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- MotionOtpInput
Constructors
-
MotionOtpInput({Key? key, int length = 4, ValueChanged<
String> ? onChanged, ValueChanged<String> ? onCompleted, TextEditingController? controller, FocusNode? focusNode, double boxHeight = 64.0, double spacing = 12.0, double borderRadius = 16.0, Color activeBorderColor = const Color(0xFF4F6EF7), Color inactiveBorderColor = const Color(0xFFE5E7EB), Color boxBackgroundColor = const Color(0x0D000000), TextStyle? textStyle, bool showLoadingAnimation = false, bool showSuccessAnimation = false, Color successColor = const Color(0xFF22C55E), VoidCallback? onSuccessAnimationCompleted}) -
const
Properties
- activeBorderColor → Color
-
final
- borderRadius → double
-
final
- boxBackgroundColor → Color
-
final
- boxHeight → double
-
final
- controller → TextEditingController?
-
final
- focusNode → FocusNode?
-
final
- hashCode → int
-
The hash code for this object.
no setterinherited
- inactiveBorderColor → Color
-
final
- key → Key?
-
Controls how one widget replaces another widget in the tree.
finalinherited
- length → int
-
final
-
onChanged
→ ValueChanged<
String> ? -
final
-
onCompleted
→ ValueChanged<
String> ? -
final
- onSuccessAnimationCompleted → VoidCallback?
-
Called once the success finale finishes playing.
final
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- showLoadingAnimation → bool
-
While true the boxes orbit in a circle formation (loading state).
final
- showSuccessAnimation → bool
-
Triggers the success finale when switched to true.
final
- spacing → double
-
final
- successColor → Color
-
Color used for the final ring, center box border and check icon.
final
- textStyle → TextStyle?
-
final
Methods
-
createElement(
) → StatefulElement -
Creates a StatefulElement to manage this widget's location in the tree.
inherited
-
createState(
) → State< MotionOtpInput> -
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