خصائص TextFormField تحسن من عمليات ادخال البيانات لدى المستخدمين في Flutter

خصائص TextFormFieldتحسن من عمليات ادخال البيانات لدى المستخدمين في Flutter

TextFormField هو عنصر واجهة مستخدم في Flutter يسمح للمستخدمين بإدخال نص. يستخدم TextFormField بشكل شائع لجمع معلومات المستخدم مثل الأسماء والعناوين وأرقام الهواتف وهو من احد اهم العناصر في تطبيقات فلاتر ولا يمكن الاستغاء عنه في برمجه الجوال للتطبيقات .

تطبيقات فلاتر: Flutter هي لغة برمجة مفتوحة المصدر تستخدم لتطوير تطبيقات الهاتف الجوال والويب.

برمجة الهاتف: يمكن استخدام Flutter لتطوير تطبيقات الهاتف الجوال.

مكونات TextFormField

يتكون TextFormField من المكونات التالية:

controller: يتحكم في النص الموجود في الحقل.

decoration: يحدد مظهر الحقل.

validator: يتحقق من صحة النص الموجود في الحقل.

onSaved: يتم استدعاؤه عند حفظ النص الموجود في الحقل.

استخدام TextFormField

يمكن استخدام TextFormField لإنشاء مربع نص في تطبيق Flutter باستخدام الخطوات التالية:

استيراد حزمة flutter/material.dart.

إنشاء عنصر TextFormField.

تحديد controller الخاص بالحقل.

تحديد decoration الخاص بالحقل.

تحديد validator الخاص بالحقل (اختياري).

تحديد onSaved الخاص بالحقل (اختياري).

بعض النصائح لإنشاء TextFormField

حدد controller الخاص بالحقل: سيسمح لك ذلك بالتحكم في النص الموجود في الحقل من خلال كود Dart الخاص بك.

حدد decoration الخاص بالحقل: سيسمح لك ذلك بتغيير مظهر الحقل.

حدد validator الخاص بالحقل (اختياري): سيسمح لك ذلك بالتحقق من صحة النص الموجود في الحقل.

حدد onSaved الخاص بالحقل (اختياري): سيسمح لك ذلك بحفظ النص الموجود في الحقل في مكان ما.

تطبيقات TextFormField

يستخدم TextFormField بشكل شائع في تطبيقات Flutter التالية:

تطبيقات تسجيل الدخول وإنشاء الحسابات: يستخدم TextFormField لجمع معلومات المستخدم مثل الأسماء والعناوين وأرقام الهواتف.

تطبيقات المعاملات المالية: يستخدم TextFormField لجمع معلومات المستخدم مثل أرقام بطاقات الائتمان وأرقام الحساب المصرفي.

تطبيقات الاستطلاعات والدراسات: يستخدم TextFormField لجمع ردود المستخدمين على الأسئلة.

برمجة الهاتف والجوال

يستخدم TextFormField في تطبيقات الهاتف والجوال التي تم إنشاؤها باستخدام Flutter. Flutter هي لغة برمجة مفتوحة المصدر تستخدم لتطوير تطبيقات الهاتف الجوال والويب.

كيف نضمن إدخال أرقام فقط في TextFormField في Flutter؟

يمكننا استخدام خاصية inputFormatters في TextFormField لضمان إدخال أرقام فقط. للقيام بذلك، نقوم باستيراد حزمة services.dart، والتي توفر لنا فئة FilteringTextInputFormatter. يمكننا استخدام هذه الفئة لتصفية أي إدخالات غير رقمية.

فيما يلي مثال على كيفية استخدام inputFormatters لضمان إدخال أرقام فقط:

TextFormField(
            inputFormatters: [
              FilteringTextInputFormatter.digitsOnly,
            ],
          ),
          

TextFormField(
            autovalidate: true,
            autovalidateMode: AutovalidateMode.onUserInteraction
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter your email';
              }
              return null;
            },
          ),

سيؤدي هذا إلى إنشاء مربع نص يعرض رسالة تحذير للمستخدم إذا لم يدخل أي شيء في الحقل.

تطبيق هذا على تطبيقات الهاتف الجوال

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

مثال على استخدام هذه الطريقة في تطبيقات الهاتف الجوال

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

كيفية تغيير اتجاه cursor على حسب اللغه

class MyTextFormField extends StatefulWidget {
  const MyTextFormField({super.key});

  @override
  MyTextFormFieldState createState() => MyTextFormFieldState();
}

class MyTextFormFieldState extends State<MyTextFormField> {
  final TextEditingController controller = TextEditingController();
  TextDirection textDirection = TextDirection.ltr;
  String? currentLanguage;

  String? detectLanguage(String text) {
    if (text.isEmpty) return null;

    final arabicLanguage = RegExp(r'[\u0600-\u06FF]');
    final englishLanguage = RegExp(r'[a-zA-Z]');

    final isArabic = arabicLanguage.hasMatch(text);
    final isEnglish = englishLanguage.hasMatch(text);

    if (isArabic && !isEnglish) return 'arabic';
    if (isEnglish && !isArabic) return 'english';

    return null;
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      textDirection: textDirection,
      onChanged: (value) {
        final language = detectLanguage(value);
        if (language != currentLanguage) {
          setState(() {
            currentLanguage = language;
            textDirection = language == 'arabic'
                ? TextDirection.rtl
                : TextDirection.ltr;
          });
        }
      },
      decoration: const InputDecoration(
        hintText: 'Type something...',
      ),
    );
  }
}