Expanded

توزيع المساحة المتبقية Expanded

Expanded يجعل ابنًا داخل Row أو Column يأخذ كل المساحة المتبقية المتاحة — الحل القياسي لمشكلة overflow.

بدون Expanded، عناصر Row/Column تأخذ حجمها الطبيعي فقط وقد تفيض عن المساحة المتاحة. flex يتحكّم بنسبة توزيع المساحة بين أكثر من Expanded بنفس الأب.

الصياغة

Row(
  children: [
    Widget, // حجم ثابت
    Expanded(child: Widget), // يأخذ الباقي
  ],
)

📄 مثال

Row(
  children: [
    Icon(Icons.person),
    SizedBox(width: 8),
    Expanded(
      child: Text(
        'نص طويل جدًا قد يفيض بدون Expanded حوله بهذا المكان بالضبط',
        overflow: TextOverflow.ellipsis,
      ),
    ),
  ],
)

أهم المعاملات

المعامل	الوظيفة
flex	نسبة توزيع المساحة بين أكثر من Expanded بنفس الأب — افتراضي 1
child	الويدجت الذي يأخذ المساحة المتبقية

💡 نصائح عملية

استخدم Flexible بدل Expanded إن أردت السماح للابن بأخذ أقل من المساحة المتاحة عند الحاجة

⚠️ أخطاء شائعة

استخدام Expanded خارج Row/Column/Flex مباشرة — يعمل فقط كابن مباشر لويدجت من عائلة Flex

خصائص ذات صلة

Row ترتيب أفقي Column ترتيب عمودي

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار FLUTTER الكامل بالعربي.