كيفيه تفعيل ميزه 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. هذه الميزة تعزز تجربة المستخدم وتسرع عمليات التحقق.
مقاله اخري قد تفيدك : كيف تتخلص من مشاكل التخزين عند حذف التطبيق؟ الحل النهائي على Android وiOS لمطوري Flutter
رابط المقاله
