كيفيه تفعيل ميزه AutoFill في مشروعك Flutter

تعد ميزة Auto Fill واحدة من أهم الميزات التي تحسن تجربة المستخدم في تطبيقك عند إدخال رمز التحقق (OTP) حيث توفر وقت وجهد علي المستخدم بدلا من كتابه الكود يتم الحصول عليه وملئ الكود في المكان المناسب . في هذا المقال، سنشرح كيفية تنفيذ هذه الميزة باستخدام مكتبة otp_autofill في تطبيقات Flutter.

لماذا Auto Fill مهمه في تطبيقات Flutter

تحسن من تجربة المستخدم عبر إدخال الرمز بشكل تلقائيً.

تقليل الأخطاء الناتجة عن الإدخال اليدوي.

المتطلبات الأساسية

تثبيت مكتبة otp_autofill.

إعداد الصلاحيات اللازمة على Android.

otp_autofill: ^4.1.0

او يمكنك استخدام الامر

flutter pub add otp_autofill

تهيئه المشروع لإعداد كود Auto Fill في Flutter

استخدم الكود التالي لتنفيذ ميزة OTP Auto Fill

OTPInteractor().getAppSignature()
      .then((value) => print('signature - $value'));

  controller = OTPTextEditController(
    codeLength: 6,
    onCodeReceive: (code) {
      _otpController.clear();
      _otpController.text = code;
    },
  )..startListenUserConsent(
      (code) {
        final exp = RegExp(r'(d{6})');
        return exp.stringMatch(code ?? '') ?? '';
      },
    );

يمكنك استخدام الكود التالي داخل initState

إعداد الأذونات على Android

افتح ملف AndroidManifest.xml وأضف الأذونات التالية:

<uses-permission android:name=”android.permission.RECEIVE_SMS” />

نصائح لتحسين تجربة المستخدم باستخدام التحقق التلقائي

واجهة المستخدم: اجعل حقل OTP بارزًا وسهل الاستخدام.

اختيار الالوان : حاول ان يكون مربع otp مناسب مع الوان مشروعك حتي يكون متناسق

من خلال هذا المقال، سوف تكون قادر علي تنفيذ ميزة Auto Fill في تطبيق Flutter باستخدام مكتبة otp_autofill. هذه الميزة تعزز تجربة المستخدم وتسرع عمليات التحقق.

شارك المقالة

كيفيه تفعيل ميزه AutoFill في مشروعك Flutter