شرح عمل pint او OTP field في Flutter بابسط طريقة

شرح عمل pint او OTP field في Flutter بابسط طريقة

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

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

add package:

flutter_otp_text_field: ^1.1.1

How to create OTP field in Flutter

في الجزء التالي نوضح كيفية استخدام مكتبة flutter_otp_text_field: ^1.1.1 والتي تساعدنا في بناء ال text fields الخاصه بالارقام وكل عنصر يحتوي على رقم واحد فقط كما هو موضح بالصورة الخاصه بالمقال يتم ادخال النص وبعدها ينتقل الى العنصر التالي له وعندما ينتهي يختفي الكيبورد ويتم تنفيذ الامر الذي تقوم به فور الانتهاء .

pint.dart

class _PinPageState extends State<PinPage> {
  String pinCode= '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: defaultAppBar(
            title: AppString.verify, context: context),
        body: Padding(
          padding: designApp,
          child: Center(
            child: Column(
              children: [
                svgImage(path: Assets.images.svg.done),
                space30Vertical,
                const myText(
                  fontWeight: FontWeight.w900,
                  title: AppString.pin_code,
                  style: Style.large,
                  align: TextAlign.center,
                ),
                space30Vertical,
                OtpTextField(
                  numberOfFields: 6,
                  focusedBorderColor: Theme.of(context).primaryColor,
                  //set to true to show as box or false to show as dash
                  showFieldAsBox: true,
                  //runs when a code is typed in
                  onCodeChanged: (String code) {

                  },
                  //runs when every textfield is filled
                  onSubmit: (String verificationCode){
                    // showDialog(
                    //     context: context,
                    //     builder: (context){
                    //       return AlertDialog(
                    //         title: Text("Verification Code"),
                    //         content: Text('Code entered is $verificationCode'),
                    //       );
                    //     }
                    // );
                  }, // end onSubmit
                ),
                space30Vertical,
                const Spacer(),
                myElevatedButton(text: AppString.verify, onPressed: (){} ),
              ],
            ),
          ),
        ));
  }
}