شرح استخدام ويدجت TextFormField في فلاتر

تعتبر حقول الإدخال Input Fields من العناصر الأساسية في تطبيقات Flutter، وتستخدم لإدخال البيانات والمعلومات من المستخدمين. ومن بين أنواع حقول الإدخال في Flutter، يعد TextFormField الأكثر استخدامًا والأكثر تخصيصًا.

ما هو TextFormField في فلاتر؟

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

“اقرأ أيضاً: شرح استخدام ويدجت IntrinsicHeight في فلاتر“

الخصائص الأساسية لـ TextFormField

يمكن استخدام TextFormField في Flutter للعديد من الأغراض، سواء كان ذلك لجمع الإدخالات النصية أو الرقمية أو البريد الإلكتروني أو المواقع الإلكترونية أو أي نوع آخر من الإدخالات. في هذا الجزء، سنلقي نظرة على الخصائص الأساسية لـ TextFormField:

initialValue

هذه الخاصية تسمح لك بتحديد القيمة الأولية لحقل الإدخال.

TextEditingController _controller = TextEditingController();
TextFormField(
  controller: _controller,
  initialValue: 'Initial value',
)

keyboardType

تسمح هذه الخاصية لك بتحديد نوع لوحة المفاتيح المستخدمة لحقل الإدخال.

TextFormField(
  keyboardType: TextInputType.emailAddress,
)

obscureText

تسمح هذه الخاصية لك بإخفاء النص المدخل في حقل الإدخال، مفيدة لإدخال كلمات المرور.

TextFormField(
  obscureText: true,
)

“اقرأ أيضاً: شرح استخدام AnimatedPositioned في فلاتر“

textAlign

تسمح هذه الخاصية لك بتحديد موضع النص داخل حقل الإدخال.

TextFormField(
  textAlign: TextAlign.center,
)

التحكم في الإدخال والاستجابة للأحداث

يمكن التحكم في الإدخال واستجابة الحقل للأحداث باستخدام الخصائص التالية:

onChanged

يتم استدعاء هذه الدالة عندما يتم تغيير القيمة في حقل الإدخال.

TextFormField(
  onChanged: (value) {
    // Do something with the value
  },
)

onEditingComplete

يتم استدعاء هذه الدالة عندما يتم الانتهاء من تحرير حقل الإدخال.

TextFormField(
  onEditingComplete: () {
    // Do something when editing is complete
  },
)

onFieldSubmitted

يتم استدعاء هذه الدالة عندما يتم تقديم حقل الإدخال بعد الضغط على زر “Enter” على لوحة المفاتيح.

TextFormField(
  onFieldSubmitted: (value) {
    // Do something with thevalue when submitted
  },
)

خصائص التحقق من الصحة والتحقق من الصيغة

يمكن استخدام الخصائص التالية للتحقق من صحة الإدخال وضمان أنه يتوافق مع الصيغة المطلوبة:

validator

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

TextFormField(
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter a value';
    }
    return null;
  },
)

inputFormatters

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

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

تخصيص النمط والمظهر

يمكن تخصيص المظهر والنمط باستخدام الخصائص التالية:

decoration

تسمح هذه الخاصية لك بتحديد الديكور والمظهر الخاص بحقل الإدخال.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
    border: OutlineInputBorder(),
  ),
)

style

تسمح هذه الخاصية لك بتحديد نمط النص داخل حقل الإدخال.

TextFormField(
  style: TextStyle(
    fontSize: 16,
    color: Colors.black,
  ),
)

مثال على استخدام TextFormField في فلاتر

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

هنا مثال يستخدم TextFormField في فلاتر:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Text Form Field Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  late String _name;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Text Form Field Example'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: <Widget>[
            TextFormField(
              decoration: const InputDecoration(
                labelText: 'Enter your name',
              ),
              validator: (value) {
                if (value!.trim().isEmpty) {
                  return 'Please enter your name.';
                }
                return null;
              },
              onSaved: (value) {
                _name = value!;
              },
            ),
            ElevatedButton(
              child: const Text('Submit'),
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  _formKey.currentState!.save();
                  print('Name: $_name');
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

في هذا المثال، تم استخدام TextFormField لجمع اسم المستخدم. يتم تحديد decoration لتزيين حقل الإدخال وتم تحديد validator للتحقق من صحة الإدخال. إذا كان الإدخال فارغًا، فسيتم إرجاع رسالة خطأ. عند الضغط على الزر “Submit”، سيتم التحقق من الإدخال وحفظه في المتغير _name، ثم سيتم طباعة الاسم في وحدة تحكم الإخراج Console.

“اقرأ أيضاً: شرح استخدام ويدجت Visibility في فلاتر“

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