الفصل 44 — الـ widgets وشجرة الـ widgets

المستوى: مبتدئ المدة التقديرية: 7 ساعات المتطلبات المسبقة: الجزء 1A (الفصول من 01 إلى 18)، والفصل 43 — تثبيت Flutter وبنية المشروع ما ستتقنه في نهاية الفصل: قراءة وكتابة شجرة widgets في Flutter، وبناء شاشة كاملة باستخدام MaterialApp وScaffold وAppBar وCenter وText، وفهم ما هو BuildContext، وتقسيم الواجهة إلى widgets صغيرة قابلة لإعادة الاستخدام.

44.0 — أهداف الفصل

في نهاية هذا الفصل ستكون قادرًا على:

• شرح العبارة «في Flutter، كل شيء widget»؛
• إدراك أن الـ widget هو فئة (class) Dart عادية، مثل الفئات التي رأيناها في الفصل 08؛
• شرح لماذا يُعدّ الـ widget وصفًا وليس كائنًا مرسومًا على الشاشة؛
• رسم شجرة widgets وقراءتها؛
• شرح لماذا يفضّل Flutter التركيب (composition) على الوراثة (تذكير بالفصل 11)؛
• استخدام runApp() وتحديد جذر الشجرة؛
• استخدام MaterialApp ومعاملاتها home وtitle وtheme وdebugShowCheckedModeBanner؛
• استخدام Scaffold ومناطقه appBar وbody وfloatingActionButton وbottomNavigationBar؛
• كتابة أول شاشة كاملة قابلة للتجميع وسهلة القراءة؛
• استخدام Center وText؛
• قراءة المسافات البادئة في شجرة widgets متداخلة دون أن تضيع؛
• شرح ما هو BuildContext فعلًا؛
• استخدام Theme.of(context) وفهم الصعود في الشجرة؛
• تسمية الأشجار الثلاث في Flutter: الـ widgets والعناصر (elements) وكائنات الرسم (render objects)؛
• شرح لماذا يستطيع Flutter إعادة بناء واجهته بكثرة دون أن يبطؤ؛
• وضع const أمام widget وتوضيح ما يغيّره ذلك؛
• شرح فائدة Key بإيجاز؛
• استخراج جزء من الواجهة إلى فئة widget خاصة به؛
• شرح لماذا يكون الاستخراج إلى دالة أسوأ من الاستخراج إلى فئة؛
• تقسيم الواجهة إلى widgets صغيرة؛
• كتابة مُنشئ (constructor) widget بمعاملات مسمّاة (تذكير بالفصل 09)؛
• التمييز بين child وchildren؛
• فتح مفتش الـ widgets (widget inspector) في VS Code وقراءته؛
• قراءة رسالة خطأ رسم في Flutter والعثور على السطر المسبب للخطأ.