flutter_otp_kit 3.0.0 copy "flutter_otp_kit: ^3.0.0" to clipboard
flutter_otp_kit: ^3.0.0 copied to clipboard

Published 46 days ago • Latest: 3.1.1
[unknown platforms]
→

Metadata

A comprehensive Flutter OTP verification package with SMS autofill, biometric support, performance monitoring, and extensive customization options.

More...


[Flutter OTP Kit]

Flutter OTP Kit

🚀 The Ultimate OTP Verification Solution for Flutter

🎯 Why Flutter OTP Kit is the #1 Choice

The most comprehensive, feature-rich, and performant OTP verification solution for Flutter. Built with modern architecture, enterprise-grade security, and unlimited customization options.

🚀 Complete Solution

Timer, validation, masking, SMS autofill, biometric integration - everything in one package

🎨 Unlimited Customization

16 cursor styles, 7+ field shapes, 10+ animation types, complete theming control

🔒 Enterprise Security

Rate limiting, biometric integration, audit logging, anti-tampering measures

⚡ Performance First

Lazy loading, memory optimization, animation pooling, real-time monitoring

📱 Platform Optimized

iOS, Android, Web, Desktop - each platform gets the best experience

♿ Accessibility Ready

Full screen reader support, keyboard navigation, voice control, high contrast

Demo #

Basic Theme Rotate Animation Rounded Fields
[assets\images\basic_theme_demo.gif] [assets\images\rotate_animation_demo.gif] [assets\images\rounded_demo.gif]
Scale Animation Underlined Fields Cursor Styles
[assets\images\scale_demo.gif] [assets\images\underline_demo.gif] [assets\images\cursor_styles.gif]

🚀 Quick Start

📦 Installation

dependencies:
  flutter_otp_kit: ^3.0.0

⚡ Basic Usage

import 'package:flutter_otp_kit/flutter_otp_kit.dart';

class OtpScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: OtpKit(
title: 'Verify Phone Number',
subtitle: 'Enter the code sent to +1 (555) 123-4567',
fieldCount: 4,
onVerify: (otp) async {
return otp == '1234';
},
onResend: () {
// Resend OTP
},
),
);
}
}

🎨 Advanced Usage

OtpKit(
  title: 'Advanced OTP Verification',
  fieldCount: 6,
  fieldConfig: OtpFieldConfig.preset(OtpFieldPreset.rounded),
  animationConfig: OtpAnimationConfig(
    enableAnimation: true,
    fieldFillAnimationType: FieldFillAnimationType.rotate,
    errorFieldAnimationType: ErrorFieldAnimationType.bounce,
  ),
  smsConfig: OtpSmsConfig(enableSmsAutofill: true),
  securityConfig: OtpSecurityConfig(enableRateLimiting: true),
  onVerify: (otp) async => await verifyOtpWithBackend(otp),
  onResend: () => resendOtp(),
)

🎨 Visual Customization

Unlimited customization options to match your app's design perfectly 

<div style="background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0;">
  <h3 style="margin: 0 0 1.5rem 0; color: #333; font-size: 1.5rem;">🔷 Field Shapes</h3>
  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
    <div style="background: #f8f9fa; padding: 1rem; border-radius: 10px; text-align: center;">
      <div style="width: 40px; height: 40px; background: #667eea; border-radius: 5px; margin: 0 auto 0.5rem;"></div>
      <span style="font-size: 0.9rem; color: #666;">Rectangle</span>
    </div>
    <div style="background: #f8f9fa; padding: 1rem; border-radius: 10px; text-align: center;">
      <div style="width: 40px; height: 40px; background: #f093fb; border-radius: 10px; margin: 0 auto 0.5rem;"></div>
      <span style="font-size: 0.9rem; color: #666;">Rounded</span>
    </div>
    <div style="background: #f8f9fa; padding: 1rem; border-radius: 10px; text-align: center;">
      <div style="width: 40px; height: 40px; background: #4facfe; border-radius: 50%; margin: 0 auto 0.5rem;"></div>
      <span style="font-size: 0.9rem; color: #666;">Circle</span>
    </div>
    <div style="background: #f8f9fa; padding: 1rem; border-radius: 10px; text-align: center;">
      <div style="width: 40px; height: 40px; background: #43e97b; border-radius: 20px; margin: 0 auto 0.5rem;"></div>
      <span style="font-size: 0.9rem; color: #666;">Stadium</span>
    </div>
  </div>
</div>

<div style="background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0;">
  <h3 style="margin: 0 0 1.5rem 0; color: #333; font-size: 1.5rem;">🎯 Cursor Styles</h3>
  <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;">
    <div style="background: #f8f9fa; padding: 0.5rem; border-radius: 8px; text-align: center;">
      <div style="width: 20px; height: 20px; background: #667eea; margin: 0 auto 0.25rem;"></div>
      <span style="font-size: 0.7rem; color: #666;">Bar</span>
    </div>
    <div style="background: #f8f9fa; padding: 0.5rem; border-radius: 8px; text-align: center;">
      <div style="width: 20px; height: 20px; background: #f093fb; border: 2px solid #f093fb; margin: 0 auto 0.25rem;"></div>
      <span style="font-size: 0.7rem; color: #666;">Block</span>
    </div>
    <div style="background: #f8f9fa; padding: 0.5rem; border-radius: 8px; text-align: center;">
      <div style="width: 20px; height: 2px; background: #4facfe; margin: 9px auto 0.25rem;"></div>
      <span style="font-size: 0.7rem; color: #666;">Underline</span>
    </div>
    <div style="background: #f8f9fa; padding: 0.5rem; border-radius: 8px; text-align: center;">
      <div style="width: 20px; height: 20px; border: 2px solid #43e97b; border-radius: 4px; margin: 0 auto 0.25rem;"></div>
      <span style="font-size: 0.7rem; color: #666;">Outline</span>
    </div>
  </div>
  <p style="margin: 1rem 0 0 0; color: #666; font-size: 0.9rem;">+ 12 more cursor styles available</p>
</div>

🔒 Enterprise Features

Production-ready security and performance features for enterprise applications 

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: 20px; color: white;">
  <h3 style="margin: 0 0 1rem 0; font-size: 1.3rem;">📱 SMS Autofill</h3>
  <ul style="margin: 0; padding-left: 1.5rem; opacity: 0.9;">
    <li>iOS native SMS autofill</li>
    <li>Android SMS Retriever API</li>
    <li>Android User Consent API</li>
    <li>Smart Auth integration</li>
    <li>Regex validation</li>
  </ul>
</div>

<div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); padding: 2rem; border-radius: 20px; color: white;">
  <h3 style="margin: 0 0 1rem 0; font-size: 1.3rem;">🔐 Biometric Security</h3>
  <ul style="margin: 0; padding-left: 1.5rem; opacity: 0.9;">
    <li>Face ID integration</li>
    <li>Touch ID support</li>
    <li>Fingerprint authentication</li>
    <li>Face recognition</li>
    <li>Fallback options</li>
  </ul>
</div>

<div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); padding: 2rem; border-radius: 20px; color: white;">
  <h3 style="margin: 0 0 1rem 0; font-size: 1.3rem;">🛡️ Rate Limiting</h3>
  <ul style="margin: 0; padding-left: 1.5rem; opacity: 0.9;">
    <li>Configurable attempt limits</li>
    <li>Per-minute restrictions</li>
    <li>Per-hour restrictions</li>
    <li>Automatic lockout</li>
    <li>Audit logging</li>
  </ul>
</div>

<div style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); padding: 2rem; border-radius: 20px; color: white;">
  <h3 style="margin: 0 0 1rem 0; font-size: 1.3rem;">⚡ Performance</h3>
  <ul style="margin: 0; padding-left: 1.5rem; opacity: 0.9;">
    <li>Lazy loading</li>
    <li>Memory optimization</li>
    <li>Animation pooling</li>
    <li>Field recycling</li>
    <li>Real-time monitoring</li>
  </ul>
</div>

📱 Platform Support 

<div style="background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0; text-align: center;">
  <div style="font-size: 3rem; margin-bottom: 1rem;">🍎</div>
  <h3 style="margin: 0 0 1rem 0; color: #333;">iOS</h3>
  <ul style="margin: 0; padding-left: 1.5rem; text-align: left; color: #666;">
    <li>Face ID</li>
    <li>Touch ID</li>
    <li>Native SMS</li>
    <li>VoiceOver</li>
  </ul>
</div>

<div style="background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0; text-align: center;">
  <div style="font-size: 3rem; margin-bottom: 1rem;">🤖</div>
  <h3 style="margin: 0 0 1rem 0; color: #333;">Android</h3>
  <ul style="margin: 0; padding-left: 1.5rem; text-align: left; color: #666;">
    <li>Fingerprint</li>
    <li>Face Recognition</li>
    <li>SMS Retriever</li>
    <li>TalkBack</li>
  </ul>
</div>

<div style="background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0; text-align: center;">
  <div style="font-size: 3rem; margin-bottom: 1rem;">🌐</div>
  <h3 style="margin: 0 0 1rem 0; color: #333;">Web</h3>
  <ul style="margin: 0; padding-left: 1.5rem; text-align: left; color: #666;">
    <li>Keyboard Handling</li>
    <li>Screen Reader</li>
    <li>Responsive Design</li>
    <li>Performance</li>
  </ul>
</div>

<div style="background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0; text-align: center;">
  <div style="font-size: 3rem; margin-bottom: 1rem;">💻</div>
  <h3 style="margin: 0 0 1rem 0; color: #333;">Desktop</h3>
  <ul style="margin: 0; padding-left: 1.5rem; text-align: left; color: #666;">
    <li>Platform Layouts</li>
    <li>Keyboard Navigation</li>
    <li>Accessibility</li>
    <li>Performance</li>
  </ul>
</div>

🎯 Configuration Examples 

<div style="background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0;">
  <h3 style="margin: 0 0 1rem 0; color: #333; font-size: 1.3rem;">🎨 Modern Design</h3>
  <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 15px; overflow-x: auto;">
    <pre style="margin: 0; font-size: 0.9rem; color: #333;"><code>OtpKit(

title: 'Modern Verification', fieldCount: 4, fieldConfig: OtpFieldConfig.preset( OtpFieldPreset.modern ), animationConfig: OtpAnimationConfig( enableAnimation: true, fieldFillAnimationType: FieldFillAnimationType.scale, ), onVerify: (otp) async => true, onResend: () {}, ) 

<div style="background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0;">
  <h3 style="margin: 0 0 1rem 0; color: #333; font-size: 1.3rem;">🔒 Enterprise Security</h3>
  <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 15px; overflow-x: auto;">
    <pre style="margin: 0; font-size: 0.9rem; color: #333;"><code>OtpKit(

title: 'Secure Verification', fieldCount: 6, securityConfig: OtpSecurityConfig( enableRateLimiting: true, maxAttemptsPerMinute: 3, enableBiometricIntegration: true, ), smsConfig: OtpSmsConfig( enableSmartAuth: true, ), onVerify: (otp) async => true, onResend: () {}, )

🔄 Migration Guide

From Previous Versions

Old way (still works):

OtpVerificationWidget(
  onVerify: (otp) => backend.verify(otp),
  onResend: () => backend.resend(),
)

New way (recommended):

OtpKit(
  onVerify: (otp) async => await backend.verify(otp),
  onResend: () => backend.resend(),
)

📊 API Reference

OtpKit Parameters

Parameter Type Required Description
onVerify Future<bool> Function(String) ✅ Verify OTP callback
onResend VoidCallback ✅ Resend OTP callback
fieldCount int ❌ Number of OTP fields (default: 4)
fieldConfig OtpFieldConfig? ❌ Field styling configuration
animationConfig OtpAnimationConfig ❌ Animation settings

🚨 Troubleshooting 

<div style="background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0;">
  <h3 style="margin: 0 0 1rem 0; color: #333; font-size: 1.3rem;">📱 SMS Autofill Issues</h3>
  <ul style="margin: 0; padding-left: 1.5rem; color: #666;">
    <li>Ensure app signature is correct</li>
    <li>Check platform permissions</li>
    <li>Verify SMS format matches regex</li>
    <li>Test on physical device</li>
  </ul>
</div>

<div style="background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0;">
  <h3 style="margin: 0 0 1rem 0; color: #333; font-size: 1.3rem;">🎬 Animation Performance</h3>
  <ul style="margin: 0; padding-left: 1.5rem; color: #666;">
    <li>Enable performance monitoring</li>
    <li>Check device performance</li>
    <li>Reduce animation complexity</li>
    <li>Use animation pooling</li>
  </ul>
</div>

<div style="background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0;">
  <h3 style="margin: 0 0 1rem 0; color: #333; font-size: 1.3rem;">🔐 Biometric Issues</h3>
  <ul style="margin: 0; padding-left: 1.5rem; color: #666;">
    <li>Check platform permissions</li>
    <li>Verify biometric availability</li>
    <li>Test on physical device</li>
    <li>Check fallback options</li>
  </ul>
</div>

<div style="background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0;">
  <h3 style="margin: 0 0 1rem 0; color: #333; font-size: 1.3rem;">⚡ Performance Tips</h3>
  <ul style="margin: 0; padding-left: 1.5rem; color: #666;">
    <li>Enable lazy loading</li>
    <li>Use memory optimization</li>
    <li>Enable background cleanup</li>
    <li>Monitor performance metrics</li>
  </ul>
</div>

🤝 Contributing & Support 

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: 20px; color: white; text-align: center;">
  <div style="font-size: 2.5rem; margin-bottom: 1rem;">📖</div>
  <h3 style="margin: 0 0 1rem 0;">Documentation</h3>
  <a href="https://github.com/seifmoustafa/flutter_otp_kit" style="color: white; text-decoration: none; font-weight: 600;">View Docs</a>
</div>

<div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); padding: 2rem; border-radius: 20px; color: white; text-align: center;">
  <div style="font-size: 2.5rem; margin-bottom: 1rem;">🐛</div>
  <h3 style="margin: 0 0 1rem 0;">Report Issues</h3>
  <a href="https://github.com/seifmoustafa/flutter_otp_kit/issues" style="color: white; text-decoration: none; font-weight: 600;">GitHub Issues</a>
</div>

<div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); padding: 2rem; border-radius: 20px; color: white; text-align: center;">
  <div style="font-size: 2.5rem; margin-bottom: 1rem;">💬</div>
  <h3 style="margin: 0 0 1rem 0;">Discussions</h3>
  <a href="https://github.com/seifmoustafa/flutter_otp_kit/discussions" style="color: white; text-decoration: none; font-weight: 600;">Join Discussion</a>
</div>

<div style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); padding: 2rem; border-radius: 20px; color: white; text-align: center;">
  <div style="font-size: 2.5rem; margin-bottom: 1rem;">☕</div>
  <h3 style="margin: 0 0 1rem 0;">Support</h3>
  <a href="https://buymeacoffee.com/seifmoustafa" style="color: white; text-decoration: none; font-weight: 600;">Buy Coffee</a>
</div>

🌟 Show Your Support

If you find this package helpful, please consider supporting the project

Made with ❤️ for the Flutter Community

Flutter OTP Kit - The most comprehensive OTP verification solution

← Metadata

33
likes
0
points
135
downloads

Publisher

unverified uploader

Weekly Downloads

Metadata

A comprehensive Flutter OTP verification package with SMS autofill, biometric support, performance monitoring, and extensive customization options.

Repository (GitHub)
View/report issues

Topics

#flutter #otp #verification #sms-autofill #biometric

Documentation

Documentation

License

unknown (license)

Dependencies

flutter

More

Packages that depend on flutter_otp_kit

Back