premium_otp_input 0.5.1

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

Premium OTP Input

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

🎬 Demo

▶️ Click to Watch Demo

Preview

Blob Mascot Arcade (BlobOtpVerificationView)

Focused State	Blob Hatching	Chomping Code	Travelling & Eating	Verified Celebration

Standard Style (PremiumOtpInput)

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

Liquid Animation (LiquidOtpVerificationView)

Empty State	Input State	Error State	Success State

Motion Animation (MotionOtpVerificationView)

Empty State	Loading State	Success State

Lightning Animation (LightningOtpVerificationView)

Empty State	Input State	Loading State	Error State	Success State

Nexus Animation (NexusOtpVerificationView)

Input State	Neural Lattice Loading	Finale Burst	Success State

Sigil Arc Flow Animation (SigilOtpVerificationView)

Input State	Cosmic Arc Loading	Autofill Suggestion	Success State

---

Available Styles Explained

1. Blob Mascot Arcade (BlobOtpVerificationView)

A playful arcade mascot style.

• Interactive Blob Mascot: Hatches from the first slot, opens its mouth, chomps each entered digit, and travels across the code row during verification.
• Morhping Badge: On success, the mascot morphs into a green verified checkmark badge with particle effects.

2. Nexus (NexusOtpVerificationView)

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

• Neural Lattice Loading: Input nodes break out of the line and expand into a connected laser grid during verification.
• Lattice Finale: Collapses into one node that bursts into shards around a checkmark.

3. 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.

4. 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.).
• Custom Slot Builder: Pass slotBuilder to render custom widgets inside each slot box.

5. Liquid (LiquidOtpVerificationView)

A playful style where the input boxes fill up with animated water-like physics as the user types.

6. Motion (MotionOtpVerificationView)

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

7. Lightning (LightningOtpVerificationView)

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

8. Custom Verification View (CustomOtpVerificationView)

A versatile container for building fully custom verification screens with custom headers, footers, slot builders, and card decorations.

---

Features

• 8 Creative Options: BlobOtpVerificationView, NexusOtpVerificationView, SigilOtpVerificationView, LiquidOtpVerificationView, MotionOtpVerificationView, LightningOtpVerificationView, PremiumOtpInput, and CustomOtpVerificationView.
• Full Custom Widget Builders: Pass slotBuilder, headerBuilder, footerBuilder, or resendButtonBuilder to any view widget.
• Font-Agnostic & Zero Hardcoded Fonts: Fully compatible with any font family or standard Flutter TextStyle.
• 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, countdown timer, and TextStyle.

---

Getting Started

Add the package dependency to your pubspec.yaml:

dependencies:
  premium_otp_input: ^0.3.0

---

Usage Examples

1. Blob Mascot Arcade Verification View

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

BlobOtpVerificationView(
  length: 4,
  isVerifying: _isVerifying,
  isSuccess: _isSuccess,
  isError: _isError,
  onCompleted: (code) {
    // Trigger code verification
  },
  onResend: () {
    // Handle resend
  },
)

2. Standard Premium OTP Input with Custom Slot Builder

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

PremiumOtpInput(
  length: 6,
  isSuccess: _isSuccess,
  isError: _isError,
  isVerifying: _isVerifying,
  onCompleted: (val) {},
  
  // Custom slot builder example
  slotBuilder: (context, index, char, isFocused) {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: isFocused ? Colors.orange.withOpacity(0.2) : Colors.transparent,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Text(
        char.isEmpty ? '•' : char,
        style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
      ),
    );
  },
)

3. Custom Verification View Layout

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

CustomOtpVerificationView(
  length: 4,
  isSuccess: _isSuccess,
  isVerifying: _isVerifying,
  headerBuilder: (context, isSuccess) => Text(
    isSuccess ? 'Welcome!' : 'Enter Secret PIN',
    style: const TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white),
  ),
  resendButtonBuilder: (context, onResend) => TextButton.icon(
    onPressed: onResend,
    icon: const Icon(Icons.refresh),
    label: const Text('Send Code Again'),
  ),
)

---

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.
slotBuilder	Widget Function(...)	null	Custom slot builder callback for PremiumOtpInput.
headerBuilder	Widget Function(...)	null	Custom header builder callback for verification views.
footerBuilder	Widget Function(...)	null	Custom footer builder callback for verification views.
resendButtonBuilder	Widget Function(...)	null	Custom resend action button builder callback.
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).
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.
textStyle	TextStyle?	TextStyle()	Custom text styling for entered digits.

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