Animated OTP Verifier

A premium Flutter OTP verification widget with:

✨ Animated OTP input boxes
✨ Moving loader border around each OTP box
✨ Auto verification when OTP is completed
✨ Smooth merge animation after successful verification
✨ Glowing success state with check icon
✨ Failure shake animation
✨ Fully customizable colors and sizing
✨ Zero external dependencies

---

Preview

Features

• Automatic OTP completion detection
• Async verification callback
• Animated loader border
• Focused box highlighting
• Success merge animation
• Success glow effect
• Failure shake animation
• Haptic feedback
• Light and dark theme friendly
• Highly customizable

---

Installation

Add dependency:

dependencies:
  animated_otp_verifier: ^0.0.1

Run:

flutter pub get

Import:

import 'package:animated_otp_verifier/animated_otp_verifier.dart';

---

Basic Usage

AnimatedOtpVerifier(
  length: 4,
  onCompleted: (otp) async {
    await Future.delayed(
      const Duration(seconds: 2),
    );

    return otp == "1234";
  },
)

---

Complete Example

AnimatedOtpVerifier(
  length: 4,

  activeColor: Colors.blue,
  loaderColor: Colors.blue,
  successColor: Colors.green,
  failedColor: Colors.red,

  onCompleted: (otp) async {
    final result = await api.verifyOtp(otp);
    return result;
  },

  onSuccess: () {
    debugPrint("OTP Verified");
  },

  onFailed: () {
    debugPrint("Invalid OTP");
  },
)

---

Customization

Colors

AnimatedOtpVerifier(
  activeColor: Colors.deepPurple,
  loaderColor: Colors.deepPurple,
  successColor: Colors.green,
  failedColor: Colors.red,
)

Size

AnimatedOtpVerifier(
  boxSize: 60,
  boxSpacing: 12,
)

OTP Length

AnimatedOtpVerifier(
  length: 6,
)

---

Constructor

Property	Type	Default
length	int	4
boxSize	double	56
boxSpacing	double	10
activeColor	Color	Colors.blue
loaderColor	Color	Colors.blue
successColor	Color	Colors.green
failedColor	Color	Colors.red
autofocus	bool	true
enableHaptic	bool	true
onCompleted	Future	required
onSuccess	VoidCallback	null
onFailed	VoidCallback	null

---

Animation Flow

1. User enters OTP
2. OTP reaches configured length
3. Verification starts automatically
4. Animated loader border appears
5. Verification succeeds
6. Boxes merge into one
7. Success glow appears
8. Check icon animates

---

Roadmap

• SMS Autofill Support
• Resend OTP Timer
• Error Message Widget
• Success Particle Effect
• Custom Success Widget
• RTL Support
• Accessibility Improvements

---

License

MIT License