premium_otp_input 0.4.0

A highly customizable, beautiful, and interactive OTP and PIN entry widget for Flutter featuring Sigil, Nexus, Lightning, Liquid, and Motion animations.

Premium OTP Input

A highly customizable, beautiful, and interactive OTP (One-Time Password) / PIN entry widget for Flutter featuring Sigil Arc Flow, Nexus Lattice Mesh, Lightning Electric Glow, Liquid Water Physics, and Motion Animations.

🎬 Demo

▶️ Click to Watch Demo

Preview

Standard Style

Empty State	Input State	Obscured (Dot)	Obscured (Star)	Obscured (Heart)

Liquid Animation

Empty State	Input State	Error State	Success State

Motion Animation

Empty State	Loading State	Success State

Lightning Animation

Empty State	Input State	Loading State	Error State	Success State

Nexus Animation

Input State	Neural Lattice Loading	Finale Burst	Success State

Sigil Arc Flow Animation

Input State	Cosmic Arc Loading	Autofill Suggestion	Success State

Available Styles Explained

1. Nexus (NexusOtpVerificationView)

A sheet-style neural lattice field with dynamic node physics.

• Neural Lattice Loading: During verification, input nodes break out of the line and expand into a 2x2 connected laser grid.
• Interconnected Wires: Laser beams connect neighbor nodes while orbital arcs spin on active nodes.
• Lattice Finale: On success, the figure collapses into one node that bursts into shards around a checkmark.

2. Sigil (SigilOtpVerificationView)

A cosmic, high-end arc flow style featuring glowing slots and interactive autofill bubbles.

• Cosmic Arc Flow: Dark-glowing cosmic slots with active arc animations and dynamic autofill toast bubbles.
• Resend Countdown: Integrated resend timer with custom countdown builders.

3. Standard (PremiumOtpInput)

The classic, highly customizable OTP input. Perfect for clean and minimal designs.

• Secure PIN Entry: Supports obscuring text with custom characters (dots, stars, hearts, etc.).
• Micro-Animations: Smooth focus transitions (scale/slide) and digit entry effects (fade/scale).

4. Liquid (LiquidOtpVerificationView)

A playful and organic style where the input boxes dynamically fill up with water-like waves as the user types.

5. Motion (MotionOtpVerificationView)

An elegant motion choreography where input boxes scatter out into an orbiting circle during verification.

6. Lightning (LightningOtpVerificationView)

An electric style where every digit ignites its box with a burning, flickering outline and live discharge sparks.

Features

• Six Distinct Styles: PremiumOtpInput, SigilOtpVerificationView, NexusOtpVerificationView, LiquidOtpVerificationView, MotionOtpVerificationView, and LightningOtpVerificationView.
• Light & Dark Theme Adaptation: Universal isDark support across all views with background luminance auto-detection.
• 100% Parameterizable Copy & Styles: Total control over every title, subtitle, footer text, button label, and TextStyle.

---

Getting Started

Add the package dependency to your pubspec.yaml:

dependencies:
  premium_otp_input: ^0.3.0

---

Usage

Here are quick examples showing the options in action. The package provides 5 main widgets: PremiumOtpInput, LiquidOtpVerificationView, MotionOtpVerificationView, LightningOtpVerificationView, and NexusOtpVerificationView.

1. Standard Premium OTP Input

import 'package:flutter/material.dart';
import 'package:premium_otp_input/premium_otp_input.dart';

class OtpScreen extends StatefulWidget {
  const OtpScreen({super.key});

  @override
  State<OtpScreen> createState() => _OtpScreenState();
}

class _OtpScreenState extends State<OtpScreen> {
  final TextEditingController _otpController = TextEditingController();
  final FocusNode _otpFocusNode = FocusNode();
  
  bool _isVerifying = false;
  bool _isSuccess = false;
  bool _isError = false;

  void _handleOtpCompleted(String value) async {
    setState(() => _isVerifying = true);
    
    // Simulate server verification delay
    await Future.delayed(const Duration(seconds: 2));
    
    if (value == "123456") {
      setState(() {
        _isVerifying = false;
        _isSuccess = true;
      });
    } else {
      setState(() {
        _isVerifying = false;
        _isError = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0F172A),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: PremiumOtpInput(
            length: 6,
            controller: _otpController,
            focusNode: _otpFocusNode,
            isSuccess: _isSuccess,
            isError: _isError,
            isVerifying: _isVerifying,
            onCompleted: _handleOtpCompleted,
            
            // Security / PIN obscuring configuration
            obscureText: true,
            obscuringCharacter: '●', // You can use '●', '*', '★', '♥', etc.

            // Customizable Animations
            entryAnimationStyle: OtpEntryAnimationStyle.scale,      // scale, fade, slide, none
            successAnimationStyle: OtpSuccessAnimationStyle.bounce, // bounce, scale, fade, none
            animateActiveBorder: true,                              // Slide & scale focus indicator
            
            // Premium aesthetics custom styling
            boxHeight: 64.0,
            spacing: 12.0,
            borderRadius: 16.0,
            activeBorderColor: const Color(0xFFF97316),
            defaultBorderColor: Colors.white.withOpacity(0.12),
            successColor: const Color(0xFF22C55E),
            errorColor: const Color(0xFFEF5350),
          ),
        ),
      ),
    );
  }
}

2. Liquid Animation Verification View

import 'package:flutter/material.dart';
import 'package:premium_otp_input/premium_otp_input.dart';

// Inside your build method:
LiquidOtpVerificationView(
  length: 4,
  isVerifying: _isVerifying,
  isSuccess: _isSuccess,
  isError: _isError,
  onCompleted: (value) {
    // Trigger verification
  },
  onResend: () {
    // Handle OTP resend
  },
)

3. Motion Animation Verification View

import 'package:flutter/material.dart';
import 'package:premium_otp_input/premium_otp_input.dart';

// Inside your build method:
MotionOtpVerificationView(
  length: 4,
  isVerifying: _isVerifying,
  isSuccess: _isSuccess,
  isError: _isError,
  onCompleted: (value) {
    // Trigger verification
  },
  onResend: () {
    // Handle OTP resend
  },
)

4. Lightning Animation Verification View

import 'package:flutter/material.dart';
import 'package:premium_otp_input/premium_otp_input.dart';

// Inside your build method:
LightningOtpVerificationView(
  length: 4,
  isVerifying: _isVerifying,
  isSuccess: _isSuccess,
  isError: _isError,
  glowColor: const Color(0xFFF59E0B), // color of the discharge
  onCompleted: (value) {
    // Trigger verification
  },
  onResend: () {
    // Handle OTP resend
  },
)

Use LightningOtpInput directly if you only want the charged boxes without the surrounding card:

LightningOtpInput(
  length: 4,
  showLoadingAnimation: _isVerifying,
  showSuccessAnimation: _isSuccess,
  isError: _isError,
  showLinks: true, // bolts bridging adjacent filled boxes
  onCompleted: (value) {},
  onSuccessAnimationCompleted: () {},
)

---

5. Nexus Lattice Verification View

import 'package:flutter/material.dart';
import 'package:premium_otp_input/premium_otp_input.dart';

// Inside your build method:
NexusOtpVerificationView(
  length: 4,
  isVerifying: _isVerifying,
  isSuccess: _isSuccess,
  isError: _isError,
  onCompleted: (value) {
    // Trigger verification
  },
  onResend: () {
    // Handle OTP resend
  },
)

Use NexusOtpInput directly for the bare field:

NexusOtpInput(
  length: 4,
  showLoadingAnimation: _isVerifying,
  showSuccessAnimation: _isSuccess,
  isError: _isError,
  showLinks: true,   // wires between the lattice nodes
  particleCount: 26, // shards thrown by the verified burst
  onCompleted: (value) {},
  onSuccessAnimationCompleted: () {},
)

---

Configuration Properties

Parameter	Type	Default	Description
length	int	6	Number of OTP input boxes.
onChanged	ValueChanged<String>?	null	Callback triggered whenever text changes.
onCompleted	ValueChanged<String>?	null	Callback triggered when all input boxes are filled.
isSuccess	bool	false	Switches view to completed success checkmark state.
isError	bool	false	Highlights input boxes with error color border.
isVerifying	bool	false	Triggers active loading border progress painter.
obscureText	bool	false	Enables obscuring of characters.
obscuringCharacter	String	'●'	The mask character used when obscureText is true.
entryAnimationStyle	OtpEntryAnimationStyle	OtpEntryAnimationStyle.scale	Animation style for digits (scale, fade, slide, none).
successAnimationStyle	OtpSuccessAnimationStyle	OtpSuccessAnimationStyle.bounce	Completed state transition animation style (bounce, scale, fade, none).
animateActiveBorder	bool	true	Enables/disables scale-up transitions and active cursor highlight slide animations.
boxHeight	double	64.0	Height of individual boxes.
borderRadius	double	16.0	Roundness of input boxes.
spacing	double	12.0	Spacing gap between input boxes.
defaultBorderColor	Color	white12	Unfocused box border color.
activeBorderColor	Color	Orange (0xFFF97316)	Focused box border color.
successColor	Color	Green (0xFF22C55E)	Completed success state color.
errorColor	Color	Red (0xFFEF5350)	Error state border color.
boxBackgroundColor	Color	slate800	Fill color for the input boxes.
loadingBorderColor	Color	Orange	Circular border loader color during verification.
emptyDotColor	Color	white24	Default color of placeholders for empty digits.
emptyDotSize	double	6.0	Diameter of the placeholder empty dot.
textStyle	TextStyle?	GoogleFonts.outfit	Custom text styling for entered digits.

Lightning-specific Properties

LightningOtpInput / LightningOtpVerificationView share the state flags above (isSuccess, isError, isVerifying, length, boxHeight, spacing, borderRadius, textStyle) and add:

Parameter	Type	Default	Description
glowColor	Color	Amber (0xFFF59E0B)	Color of the electric discharge while typing.
focusedBorderColor	Color	(0xFF111827)	Border color of the box currently receiving input.
showLinks	bool	true	Draws the bolts bridging adjacent charged boxes (LightningOtpInput).
showLoadingAnimation	bool	false	Runs the spark around every outline (LightningOtpInput).
showSuccessAnimation	bool	false	Plays the merge finale (LightningOtpInput).
onSuccessAnimationCompleted	VoidCallback?	null	Fired once the merge finale finishes.
title / subtitle	String	'Verify Identity' / auto	Card copy while entering the code.
successTitle / successSubtitle	String	'Verified Successfully' / 'Your phone number has been verified'	Card copy after the finale.
verifyingLabel	String	'Electric flow active'	Footer label while verifying.
verifiedLabel	String	'Verified and secure'	Footer label after the finale.

Nexus-specific Properties

NexusOtpInput / NexusOtpVerificationView share the state flags above (isSuccess, isError, isVerifying, length, boxHeight, spacing, borderRadius) and add:

Parameter	Type	Default	Description
accentColor	Color	Red (0xFFFF453A)	Color of the glow, the lit borders and the caret.
borderColor	Color	(0xFF34343A)	Color of the resting hairline border.
linkColor	Color	(0xFF52525B)	Color of the wires drawn between lattice nodes.
showLinks	bool	true	Draws the wires between lattice nodes (NexusOtpInput).
particleCount	int	26	Number of shards thrown by the verified burst.
latticeNodeScale	double	0.62	Lattice node size, as a fraction of boxHeight.
latticeGapScale	double	0.5	Gap between lattice nodes, as a fraction of the node size.
showCaret	bool	true	Draws the breathing caret in the active node.
showHandle	bool	true	Draws the grabber bar at the top of the sheet.
onSuccessAnimationCompleted	VoidCallback?	null	Fired once the lattice finale finishes.
title / subtitle	String	"Let's verify your number" / auto	Sheet copy while entering the code.
successTitle / successSubtitle	String	'Verified Successfully' / 'Your number has been verified.'	Sheet copy after the finale.
verifyingLabel / verifiedLabel	String	'Verifying your code' / 'Verified and Secure'	Footer labels.

Colors and text styles left null fall back to the nearest OtpTheme before the dark defaults.