تطبيق الvalidation في Flutter والتاكد من صحة البيانات

 

تطبيق الvalidation في Flutter والتاكد من صحة البيانات

تطبيق الvalidation في Flutter والتاكد من صحة البيانات 


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


تعتبر لغة dart مخصصه ل flutter و فلاتر مخصصة لتطوير و صناعة تطبيقات اندرويد او الايفون ونحن نعمل على تقديم شرح لكل من يريد تعلم دارت و برمجة و تطوير التطبيقات ios , android , web او غيرها ويمكنك تحميل حزمة sdk من خلال الانتقال الى الموقع الخاص بهم وعمل download وتثبيته والبدء في انشاء اول app او برنامج لك وسوف نعمل على تقديم دورة لعمل العديد من أفضل التطبيقات وكل شيئ تقريبا حول هذة اللغه وتقديم لكم كتاب في الدارت لتطوير من نفسك حيث يوجد الكثير من كتب development ولكن سوف نقدم لكم افضل كتاب عربي في تعلم الدارت والفلاتر


ما المميز في إطار العمل الخاص بفلاتر


يمكنك عمل تطبيق خاص بك و الـ apps التي يتم كتابها باستخدام language dart تعمل على مختلف المنصات ويمكنك البحث في جوجل عن طريق الانتقال الى google والبحث لماذا بناء التبيطقات بفلاتر ويوجد شركة او العديد من الشركات تهتم ب كيفية العمل بفلاتر وال ui لانه تستطيع من خلال flutter تطوير العديد من التطبيقات بكود واحد بالعربي او الانجليزي لكي تكون البداية لديك قوية ويمكنك الاستعانه بي المصدر ال مستخدم من موقع فلاتر .


تطبيق قاعة if على الكود والتاكد من أن البيانات صحيحة وغير فارغه


اولا عليك ان تجعل الColumn الذي يحمل جميع العناصر اسفل Form وقم بعمل key وضع له اسم والاسم يفضل ان يكون global كما يظهر بالكود , حاول ان تحيط الكود الخاص بك بchild من نوع Form ويكون هذا الchild يحتوي على key بداخلة وعند عمل اختبار على اي عنصر نقوم بكتابة الكود للتاكد من المدخلات كما يظهر وفي النهايه عند عملية الطباعة قمنا بعمل formKey وتاكدنا ان البيانات صحيحة ولا يوجد بها مشاكل ثم قمنا بطباعة الايميل والرقم السري واذا كانت البيانات فارغه سوف يظهر لنا Error يطلب منا ادخال البيانات بشكل صحيح .


استخدام الكود التالي لكي تضع شرط للمحتوى 


 validator: (value){
            if (value!.isEmpty) {
              return "Enter yor email";
            }
            return null;
          },
          


وبداخل الزر 


    onPressed: (){
    if (formKey.currentState!.validate()) {
      print(email.text);
      print(password.text);
      


الكود كامل 


تطبيق قاعة if على الكود والتاكد من أن البيانات صحيحة وغير فارغه

dart code


class Login extends StatelessWidget {

  // تعريف المتغيرات
  var email = TextEditingController();
  var password = TextEditingController();
  var formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
  return Scaffold(
  body:
  SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: Form(
    key: formKey,
    child: Column(
    children: [

        Container(
        padding: EdgeInsets.all(15),
        child: TextFormField(
        // نفس فكرة عمل id في الجافا لنستطيع استخدامه
        controller: email,
          onChanged: (String value){
            print(value);
          },
          validator: (value){
            if (value!.isEmpty) {
              return "Enter yor email";
            }
            return null;
          },

        style: TextStyle(color: Colors.deepPurpleAccent),
       textAlign: TextAlign.start,keyboardType: TextInputType.emailAddress, decoration: InputDecoration(
        prefixIcon: Icon(Icons.email , color: Colors.brown[200],),
        labelText: "Enter your email",
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(15),),

        ),)),

    Container(
    width: double.infinity,
    // color: Colors.brown[200],
    margin: EdgeInsets.symmetric(horizontal: 28),
    child: MaterialButton(
    shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(12.0) ),
    padding: EdgeInsets.all(15),
    color: Colors.brown[300],
    onPressed: (){
    if (formKey.currentState!.validate()) {
      print(email.text);
      print(password.text);
    }
    } ,
    child: Text( "Login"), textColor: Colors.white,),
    ),

    ],
    ),
  ),
  ));
  }
}


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

فيديو الشرح




تعليقات