OTP Phone Verify #

A beautiful and customizable Flutter package for phone number verification using OTP with popup dialog. Supports multiple languages and responsive design.

Features #

• Beautiful, modern popup dialog design
• Multi-language support (English, Arabic, French, Spanish, and custom)
• Responsive design for all screen sizes
• Multiple theme presets (Light, Dark, Blue, Green, Purple)
• Easy API integration with your OTP backend
• Auto-resend with countdown timer
• Secure API key/secret authentication
• Customizable all text strings
• Haptic feedback support
• RTL (Right-to-Left) support

Installation #

Add this to your pubspec.yaml:

dependencies:
  otp_phone_verify:
    git:
      url: https://github.com/ouknik/otp_phone_verify.git

Or for local development:

dependencies:
  otp_phone_verify:
    path: ../otp_phone_verify

Quick Start #

1. Configure the OTP Service #

import 'package:otp_phone_verify/otp_phone_verify.dart';

final otpConfig = OtpConfig(
  baseUrl: 'https://your-api.com',
  apiKey: 'your-api-key',
  apiSecret: 'your-api-secret',
  otpLength: 6,
  resendCooldownSeconds: 60,
);

2. Show the Verification Dialog #

// Simple usage
final result = await OtpPhoneVerifyDialog.show(
  context: context,
  config: otpConfig,
);

if (result?.verified == true) {
  print('Phone verified: ${result!.phoneNumber}');
}

3. With Custom Theme and Arabic Translation #

final result = await OtpPhoneVerifyDialog.show(
  context: context,
  config: otpConfig,
  theme: OtpDialogTheme.purple(),
  translations: OtpTranslations.arabic(appName: 'تطبيقي'),
  isRtl: true,
);

Customization #

Themes #

// Built-in themes
OtpDialogTheme()           // Default (Indigo)
OtpDialogTheme.dark()      // Dark mode
OtpDialogTheme.blue()      // Blue theme
OtpDialogTheme.green()     // Green theme
OtpDialogTheme.purple()    // Purple theme

// Custom theme
OtpDialogTheme(
  primaryColor: Colors.orange,
  secondaryColor: Colors.orange.shade50,
  backgroundColor: Colors.white,
  borderRadius: 20,
  buttonRadius: 10,
)

Translations #

// Built-in translations
OtpTranslations()                        // English (default)
OtpTranslations.arabic(appName: 'App')   // Arabic
OtpTranslations.french(appName: 'App')   // French
OtpTranslations.spanish(appName: 'App')  // Spanish

// Custom translations
OtpTranslations(
  title: 'Verify Your Phone',
  subtitle: 'We will send you a code',
  sendButton: 'Send',
  verifyButton: 'Verify',
  // ... more options
)

Configuration Options #

OtpConfig(
  baseUrl: 'https://your-api.com',
  apiKey: 'your-api-key',
  apiSecret: 'your-api-secret',
  otpLength: 6,                    // OTP code length
  expirySeconds: 300,              // 5 minutes
  allowResend: true,               // Enable resend button
  resendCooldownSeconds: 60,       // Seconds before resend
  maxResendAttempts: 3,            // Max resend attempts
  debugMode: false,                // Enable debug logging
)

Full Example #

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

class PhoneVerificationScreen extends StatelessWidget {
  final otpConfig = const OtpConfig(
    baseUrl: 'https://api.example.com',
    apiKey: 'your-api-key',
    apiSecret: 'your-api-secret',
  );

  Future<void> _verifyPhone(BuildContext context) async {
    final result = await OtpPhoneVerifyDialog.show(
      context: context,
      config: otpConfig,
      theme: OtpDialogTheme.purple(),
      translations: OtpTranslations.arabic(appName: 'متجري'),
      isRtl: true,
      phoneNumber: '+212600000000', // Pre-fill phone (optional)
    );

    if (result == null) {
      print('Dialog dismissed');
      return;
    }

    if (result.cancelled) {
      print('User cancelled');
      return;
    }

    if (result.verified) {
      print(' Phone verified: ${result.phoneNumber}');
      // Navigate to next screen
    } else {
      print(' Verification failed: ${result.error}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => _verifyPhone(context),
          child: Text('Verify Phone'),
        ),
      ),
    );
  }
}

API Requirements #

Your backend should implement these endpoints:

POST /api/otp/send #

Send OTP to phone number.

Request:

{
  "phone": "+212600000000"
}

Response:

{
  "success": true,
  "request_id": "uuid-here",
  "phone": "+212******00",
  "expires_in": 300,
  "message": "OTP sent successfully"
}

POST /api/otp/verify #

Verify OTP code.

Request:

{
  "phone": "+212600000000",
  "otp": "123456"
}

Response:

{
  "success": true,
  "verified": true,
  "message": "Phone verified successfully"
}

POST /api/otp/resend #

Resend OTP using request ID.

Request:

{
  "request_id": "uuid-here"
}

Screenshots #

License #

MIT License - feel free to use in your projects!

Author ‍ #

Created by Ouknik