كيفية اضافة خاصية كود الكابتشا في تطبيقك فلاتر | Add captcha code in flutter project

كيفية اضافة خاصية كود الكابتشا في تطبيقك فلاتر

كيفية اضافة خاصية كود الكابتشا في تطبيقك فلاتر

يتم استخدام كود الكابتشا  في كثير من الاحيان في معظم التطبيقات للتاكد من ان المستخدم ليس عباره عن ربوت بل شخص حقيقي وذلك يكون عن طريق وضع له مجموعه من الارقام والحروف والتي يطلب منه ان يقوم بكتابتها بشكل صحيح وبعد كتابتها يتم بعد ذلك مقارنة الاجابة بالكلمات التي قام النظام بوضعها واذا كانت صحيحه سوف يخرج له ان العميله صحيحه وينقله الى صفحة اخرى واذا كانت خاطئه سوف يجعله يقوم بإعادة كتابة الكود مره اخرى للتاكد من انه غير مزيف وهذه هيا الفكرة من كود الكابتشا  وفي هذا المقال سوف نشرح لكم كيف تقوم بإضافته لتطبيقك .


سواء كنت تستهدف iOS أو Android ، أو الويب ، أو Windows ، أو macOS ، أو Linux ، أو تدمجها كمجموعة أدوات واجهة المستخدم لمنصة من اختيارك ، نعتقد أن Flutter سيساعدك على إنشاء تطبيقات جميلة وسريعة مع تطوير منتج وقابل للتوسيع ومفتوح نموذج.

نود أن نوفر للمصممين حرية التعبير عن رؤيتهم الإبداعية بالكامل ، غير المقيدة بقيود الإطار الأساسي. نظرًا لإمكانيات التركيب المعقدة والتصميم متعدد الطبقات لـ Flutter ، يمكنك التحكم الكامل في كل بكسل على الشاشة. يمكنك تراكب وتحريك الرسومات والفيديو والنص وعناصر التحكم دون قيود. سواء كنت تقوم بالتطوير لنظام iOS (Cupertino) أو Android (Material) ، فإن Flutter يتميز بمجموعة كاملة من الأدوات المصغّرة التي توفر تجارب مثالية للبكسل إلى جانب إمكانيات التغيير والتبديل أو إنشاء أنماط مرئية جديدة تمامًا.


flutter number captcha 


dependencies:

  flutter_number_captcha: ^0.0.7


How to Add CAPTCHA code in flutter

بعد تثبيت المكتبة السابقة سوف تجد انه لديك امكانية لاستخدام FlutterNumberCaptcha وبداخله سوف تحتاج الى كتابة المعطيات المطلوبة منك واذا كانت العميلة صحيحه او غيرها كما هو موضح بالصورة والكود التالي والصورة الموجوده في اعلى المقال تلخص شكل النتيجه النهائيه التي سوف تحصل عليها .


How to Add CAPTCHA code in flutter

ui.dart


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange[300],
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final bool test = await FlutterNumberCaptcha.show(
              context,
              titleText: 'Enter correct number',
              placeholderText: 'Enter Number',
              checkCaption: 'Check',
              accentColor: Colors.blue,
              invalidText: 'Invalid code',
            );
            // true or false .
            print(test);
          },
          child: Text('Click Here.'),

        ),
      )
    );
    


android sdk manager تحميل flutter developers applications create app android android studio mac


تعليقات