 |
🚀 المشكلة اللي نواجهها
لما نبني في Flutter واجهات فيها أكثر من Form وButton الحفظ/الإرسال يكون خارج كل Form، نواجه هذه المشاكل:
كيف نوصل لبيانات كل Form؟
كيف نسوّي Validation لكل Form؟
📚 2. الحلول الشائعة
- كل شيء في صفحة وحدة:
تجمع كل الـ Forms في Flex واحد مرة وحده .
ينتج عنها كود معقد وصعب القراءة والتعديل (“ويدعي عليك اللي بعدك!”)😁
-ال State-Management (Bloc/Provider/….):
ترفع بيانات الـ Forms لـ Shared Model
تغير قيمة كل حقل عن طريق copyWith على الModel
ويعتبر حل جيد لتشارك البيانات بين عدة Widgets، لكن ما يغطّي Validation داخل الـ Form بسهولة، وقد يكون overkill إذا كانت Logic بسيطة.
☑️ ملاحظات على الحل الثاني:
صحيح إنه أفضل من تجميع الكل في صفحة وحدة،
لكن للوصول للـ validation ما فية API جاهزة غير إنك تخلّي كل TextFormField listener ويروح يرسل حالة Validation
ولما تكون Logic بسيطة، المبرمج يميل للـ أبسط خاصة إذا بيستخدم Bloc .
▫️ 3. الحل المقترح: GlobalKey Pattern
نستفيد من الـ super.key اللي يجي مع StatefulWidget عشان نوصل للـ Properries,actions الـ State من أي مكان أبسط:
الخطوات
في الـ StatefulWidget class عندك كلاسين:
class MyFormPage extends StatefulWidget
class MyFormPageState extends State<MyFormPage> ← هذا هو الكلاس اللي نحتاجة Global فلا تستخدم _ للـ State.
في الأب (ParentPage) تعرّف المفتاح:
__________________________________________________
final GlobalKey<MyFormPageState> myFormKey = GlobalKey<MyFormPageState>();
__________________________________________________
تمرّره للـ Child:
__________________________________________________
MyFormPage(key: myFormKey);
__________________________________________________
في أي صفحة أو زرّ تريد أن تستدعي Validation أو تجيب بيانات، تستدعي:
__________________________________________________
myFormKey.currentState!.validateAllForms();
var data = myFormKey.currentState!.collectData();
__________________________________________________
🖇 4. ملاحظة :
الGlobalKeyPattern نستخدمها فقط إذا كان الLogics بسيط وما يحتاج تعقيد .
وبرغم من إن الGlobalKey ياخذ O(1) ، لكن كلما كثرت الkeys تصير عملية الwidget rebuilds بطيئة وتزيد من الcoubling بين الparent والchilde .
📍في الصور المرفقة:
مثال عن استخدام الGlobalKeyPattern ،
ومقارنه بين إستخدام الGlobalKeyPattern وال StateMangement
🎯 5. الخلاصة
جرب الطريقة الأنسب لحجم وتعقيد مشروعك
