premium_otp_input 0.2.0

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

Premium OTP Input

A highly customizable, beautiful, and interactive OTP (One-Time Password) / PIN entry widget for Flutter featuring 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

Available Styles Explained

1. 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).
• Dynamic States: Easily toggle between default, active, loading, error, and success borders.

2. Liquid (LiquidOtpVerificationView)

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

• Wave Physics: Real-time animated liquid waves fill each box.
• State Colors: The liquid turns into a red wave for error states and a green wave for success states.
• Highly Engaging: Creates a fun, interactive, and modern user experience.

3. Motion (MotionOtpVerificationView)

An elegant, Instagram-style motion choreography designed to wow the user.

• Scattered Orbit (Loading): When verifying, the input boxes physically scatter out of their row and form a spinning, orbiting circle.
• Glowing Finale (Success): Upon success, the boxes collapse into a single center box, surrounded by a softly glowing and pulsing success ring with a checkmark.
• Premium Feel: Ideal for apps that want to turn the boring "verification waiting time" into a delightful animation.

4. Lightning (LightningOtpVerificationView)

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

• Charged Boxes: The outline of each filled box crawls and burns with a live discharge, and a bolt bridges every pair of adjacent filled boxes.
• Spark Loader: While verifying, a bright spark runs around every box outline instead of a separate spinner.
• Merge Finale: On success the charge surges, the boxes fly together and merge into a single green box with a glowing check mark that keeps pulsing.

Features

• Four Distinct Styles: Choose between the Standard PremiumOtpInput, the playful LiquidOtpVerificationView, the elegant MotionOtpVerificationView, or the electric LightningOtpVerificationView.
• Rich Micro-Animations: Smooth scale/fade/slide transitions on digit entry, active cursor border highlight, and box focus scaling.
• Customizable Animation Styles:
  • Choose between scale, fade, slide, or none for digit entry.
  • Choose between bounce, scale, fade, or none for the success screen transition.
• Secure Obscuring / PIN Mode: Easily hide/obscure typed characters with customizable obscuring characters (●, *, etc.).
• Dynamic States: Built-in verification loading indicators, error styling, and success checks (complete with checkmark drawing animations).
• Extensively Customizable: Adjust colors, borders, borderRadius, font styles, dot sizes, padding, spacing, and sizes.

---

Getting Started

Add the package dependency to your pubspec.yaml:

dependencies:
  premium_otp_input: ^0.2.0

---

Usage

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

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: () {},
)

---

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.