تعتبر شاشة إدخال رمز التحقق OTP (One-Time Password) من أهم الشاشات الموجودة داخل تطبيقات Flutter الحديثة، حيث يتم استخدامها في تسجيل الدخول، وإنشاء الحسابات، واستعادة كلمات المرور، وتأكيد العمليات الحساسة.

وتوفر مكتبة premium_otp_input حلاً جاهزًا لإنشاء حقول إدخال OTP بتصميم احترافي وقابل للتخصيص، مع دعم كامل لخصائص Flutter الحديثة مثل تغيير الألوان، والتحكم في عدد الخانات، وإدارة التركيز بين الحقول بشكل تلقائي.

بدلاً من إنشاء حقول TextField متعددة وإدارة الانتقال بينها يدويًا، يمكن الاعتماد على premium_otp_input للحصول على واجهة مستخدم احترافية باستخدام عدد قليل من الأسطر البرمجية.

في هذا المقال سنتعرف على كيفية استخدام مكتبة premium_otp_input داخل مشاريع Flutter، وطريقة تخصيص شكل حقول OTP، بالإضافة إلى أفضل الممارسات للحصول على تجربة استخدام مميزة.

توفر المكتبة العديد من المميزات التي تجعلها مناسبة لمعظم تطبيقات Flutter التي تعتمد على التحقق بواسطة رمز OTP.

ومن أهم هذه المميزات:

ولهذا السبب تعتبر خيارًا مناسبًا للمطورين الذين يبحثون عن تنفيذ سريع واحترافي لشاشات التحقق داخل تطبيقات Flutter.

تعتمد فكرة المكتبة على إنشاء مجموعة من الحقول المتجاورة تمثل رمز التحقق الذي يتم إرساله إلى المستخدم.

وعند كتابة كل رقم ينتقل المؤشر تلقائيًا إلى الحقل التالي، وبعد اكتمال جميع الخانات يتم استدعاء Callback يحتوي على رمز OTP بالكامل.

ويساعد ذلك على تقليل كمية الكود وتحسين تجربة المستخدم أثناء إدخال رمز التحقق.

يمكن إضافة المكتبة بسهولة داخل ملف pubspec.yaml.

dependencies:
  premium_otp_input: ^latest

بعد ذلك يتم تنفيذ الأمر التالي لتحميل جميع الملفات المطلوبة.

flutter pub get

بعد تثبيت الحزمة يتم استيرادها داخل ملف Dart.

import 'package:premium_otp_input/premium_otp_input.dart';

بعدها تصبح جميع Widgets الخاصة بالمكتبة جاهزة للاستخدام داخل التطبيق.

يمكن إنشاء شاشة إدخال رمز التحقق باستخدام Widget الخاصة بالمكتبة.

PremiumOtpInput(
  length: 6,
  onCompleted: (code) {

  },
)

بمجرد إدخال جميع الأرقام سيتم استدعاء الدالة onCompleted مع قيمة رمز التحقق بالكامل.

تسمح المكتبة بتغيير عدد خانات OTP بما يتناسب مع النظام المستخدم.

فيمكن إنشاء رمز مكون من أربعة أو خمسة أو ستة أرقام بسهولة.

length: 4

ويعتبر رمز التحقق المكون من ست خانات هو الأكثر استخدامًا داخل التطبيقات الحديثة.

توفر المكتبة إمكانية تخصيص شكل الحقول بما يتناسب مع تصميم التطبيق.

يمكن تغيير الألوان، وحجم الخط، ونصف قطر الحواف، بالإضافة إلى لون الحدود عند التركيز على الحقل.

ويساعد ذلك على دمج شاشة OTP مع هوية التطبيق بسهولة.

بعد إدخال جميع الأرقام يتم استدعاء Callback يحتوي على رمز التحقق.

onCompleted: (otp) {

}

ومن خلال هذه الدالة يمكن إرسال الرمز مباشرة إلى الخادم للتحقق من صحته.

بعد الحصول على رمز التحقق يمكن استخدامه مع أي API خاص بالمصادقة.

وعند نجاح عملية التحقق يمكن توجيه المستخدم إلى الصفحة الرئيسية أو تنفيذ أي إجراء آخر داخل التطبيق.

يمكن استخدام premium_otp_input في العديد من المشاريع المختلفة.

تعتبر مكتبة premium_otp_input من المكتبات المفيدة لمطوري Flutter الذين يرغبون في إنشاء شاشة إدخال OTP بتصميم احترافي مع أقل قدر ممكن من الأكواد.

كما توفر إمكانية تخصيص شكل الحقول، وإدارة الانتقال بينها تلقائيًا، والتعامل مع اكتمال الإدخال بسهولة، مما يجعلها مناسبة لتطبيقات تسجيل الدخول والتحقق من الهوية.

ويمكن دمج المكتبة مع Firebase Authentication أو أي خدمة تحقق أخرى، مما يساعد على إنشاء تجربة تسجيل دخول حديثة وسريعة داخل تطبيقات Flutter.

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("OTP Verification"),
      ),
      body: Center(
        child: PremiumOtpInput(
          length: 6,
          onCompleted: (otp) {
            debugPrint("OTP: $otp");
          },
        ),
      ),
    );
  }
}