الفصل 46 — التخطيطات: Row وColumn وStack والقيود

المستوى: مبتدئ / متوسط المدة المقدّرة: 10 ساعات المتطلبات المسبقة: الفصل 45 — StatelessWidget وStatefulWidget ما ستكون قادرًا على فعله في نهاية الفصل: وضع أي عنصر واجهة في المكان الذي تريده بالضبط على الشاشة، وفهم أخطاء التخطيط في Flutter وتصحيحها، وإعادة إنتاج تصميم كامل دون تخبّط.

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

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

• صياغة قاعدة التخطيط في Flutter في جملة واحدة؛
• شرح ما هو القيد (contrainte) ولماذا ينزل في الشجرة؛
• استخدام Container مع معرفة مزالقه؛
• كتابة EdgeInsets بصيغه الأربع؛
• تزيين صندوق باستخدام BoxDecoration: اللون والحدود والزوايا المستديرة والظل؛
• الاختيار بين Padding وSizedBox وCenter وAlign؛
• رصّ العناصر عموديًا باستخدام Column؛
• محاذاة العناصر أفقيًا باستخدام Row؛
• التمييز بين المحور الرئيسي والمحور المتقاطع؛
• استخدام القيم الست لـ MainAxisAlignment؛
• استخدام قيم CrossAxisAlignment؛
• ضبط mainAxisSize ومعرفة سبب ذلك؛
• قراءة الخطأ RenderFlex overflowed وتصحيحه بثلاث طرق مختلفة؛
• توزيع المساحة باستخدام Expanded وFlexible وSpacer؛
• شرح الفرق الدقيق بين Expanded وFlexible؛
• الانتقال إلى السطر التالي تلقائيًا باستخدام Wrap؛
• تراكب العناصر باستخدام Stack وتحديد مواضعها باستخدام Positioned؛
• الاحتفاظ بعدة صفحات في الذاكرة باستخدام IndexedStack؛
• فرض نسبة العرض إلى الارتفاع باستخدام AspectRatio؛
• تحديد الأبعاد بالنسبة المئوية باستخدام FractionallySizedBox؛
• فرض القيود باستخدام ConstrainedBox وBoxConstraints؛
• فهم كلفة IntrinsicHeight؛
• جعل الصفحة قابلة للتمرير باستخدام SingleChildScrollView؛
• تجنّب الحافة المقتطعة (notch) وشريط النظام باستخدام SafeArea؛
• تنقيح التخطيط بصريًا؛
• إعادة بناء تصميم من الأعلى إلى الأسفل بمنهجية قابلة للتكرار.