Premium OTP Input

A highly customizable, beautiful, and interactive OTP (One-Time Password) / PIN entry widget for Flutter. It features rich visual aesthetics, micro-animations, verification loaders, error/success states, and optional security (obscure text) masking.

🎬 Demo

▶️ Click to Watch Demo

Preview

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

Features

• 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:
    path: ../premium_otp_input # Use local path or package name when published

Usage

Here is a quick example showing the options in action, including customizable animations and obscuring text:

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),
          ),
        ),
      ),
    );
  }
}

Configuration Properties