Row

ترتيب أفقي Row

Row يرتّب مجموعة ويدجتس بجانب بعضها أفقيًا، مع تحكّم كامل بالمحاذاة والمسافات.

أحد أهم ويدجتس التخطيط — يأخذ قائمة children ويرتّبها بخط واحد أفقي. يفيض (Overflow) إذا كان مجموع عرض الأبناء أكبر من المساحة المتاحة، ما لم تُستخدم Expanded أو Flexible لتوزيع المساحة.

الصياغة

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [Widget, Widget, ...],
)

📄 مثال

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.star),
    Text('التقييم'),
    Icon(Icons.favorite),
  ],
)

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

المعامل	الوظيفة
mainAxisAlignment	المحاذاة على المحور الأفقي (start/end/center/spaceBetween...)
crossAxisAlignment	المحاذاة على المحور العمودي
children	قائمة الويدجتس المرتّبة أفقيًا

💡 نصائح عملية

استخدم Expanded حول أحد الأبناء لجعله يأخذ كل المساحة المتبقية تلقائيًا

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

وضع أبناء بعرض غير محدود (مثل نص طويل) داخل Row بدون Expanded/Flexible — يسبب خطأ RenderFlex overflow الشهير

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