النماذج وإدخال البيانات

يبدو النموذج أبسط تمرين في تطوير تطبيقات الجوال، لكنه في الواقع المكان الذي تتجمع فيه أكثر التفاصيل التي تصنع الفرق بين تطبيق ممتع وتطبيق يتخلى عنه المستخدم: لوحة المفاتيح التي تغطي الحقل الجاري الكتابة فيه، ومفتاح «التالي» الذي لا يقود إلى أي مكان، ورسالة الخطأ التي تظهر قبل أن ينتهي المستخدم من الكتابة، والمحتوى الذي يضيع لأن الشاشة دُوِّرت.

لا توجد مشكلة من هذه المشكلات صعبة بمفردها، لكنها كثيرة، ويوفر الإطار لكل منها أداة محددة لا يظهر وجودها بوضوح: Form ومعها GlobalKey، وTextInputAction، وFocusNode، وautovalidateMode، وTextEditingController. النموذج المكتوب من دون هذه الأدوات يعمل في العرض التجريبي ويخيّب الأمل عند الاستخدام الفعلي.

سنبني شاشة تسجيل كاملة، ونضيف القطع واحدة تلو الأخرى، ونبيّن في كل مرة ما الذي ينكسر بدونها. وسنتناول أيضًا تسرب الذاكرة الخاص بهذا الدرس: TextEditingController الذي يُنشأ دون أن يُحرَّر، فيبقى حيًّا بعد إغلاق الشاشة.

TextField وTextEditingController

يكتفي الحقل المجرد بعرض النص وجمعه:

TextField(
  decoration: const InputDecoration(
    labelText: 'Nom complet',
    hintText: 'Camille Rousseau',
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.person_outline),
  ),
  onChanged: (valeur) => debugPrint('saisi : $valeur'),
)