animated_otp_verifier 0.0.1

A premium animated OTP verification widget with loader border, merge animation, success glow, and failure shake.

example/lib/main.dart

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

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const OtpExampleScreen(),
      theme: ThemeData(
        colorSchemeSeed: Colors.deepPurple,
        useMaterial3: true,
      ),
    );
  }
}

class OtpExampleScreen extends StatelessWidget {
  const OtpExampleScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final primary = Theme.of(context).colorScheme.primary;

    return Scaffold(
      backgroundColor: const Color(0xffF5F7FB),
      body: SafeArea(
        child: Center(
          child: AnimatedOtpVerifier(
            length: 4,
            activeColor: primary,
            loaderColor: primary,
            successColor: Colors.green,
            onCompleted: (otp) async {
              await Future.delayed(const Duration(seconds: 2));
              return otp == '1234';
            },
            onSuccess: () {
              debugPrint('OTP verified');
            },
            onFailed: () {
              debugPrint('Invalid OTP');
            },
          ),
        ),
      ),
    );
  }
}