Row

🧱 ما هي Row في Flutter؟

• Row هي ويدجت تُستخدم لترتيب العناصر (Widgets) أفقيًا بجانب بعضها البعض (من اليسار إلى اليمين أو من اليمين إلى اليسار بحسب اتجاه اللغة).

Row(
  children: [
    Icon(Icons.star),
    Text('نجمة'),
  ],
)

Row(
  children: [
    Icon(Icons.star),
    Text('نجمة'),
  ],
)

🧩 متى تستخدم Row؟

تُستخدم Row عندما تريد:

• ترتيب عدة ويدجت في صف أفقي واحد.
• وضع أزرار أو أي عناصر جنبًا إلى جنب.
• بناء واجهات بسيطة مثل: شريط أدوات، قائمة أفقية، أو عرض بيانات بشكل أفقي.

📌 الخصائص الأساسية في Row

1. children

القائمة التي تحتوي على الودجات التي سيتم عرضها أفقيًا.

Row(
  children: [
    Icon(Icons.home),
    Text('الصفحة الرئيسية'),
  ],
)

Row(
  children: [
    Icon(Icons.home),
    Text('الصفحة الرئيسية'),
  ],
)

2. mainAxisAlignment

تتحكم في توزيع العناصر على المحور الأفقي (Main Axis).

🧠 المحور الأفقي = Row = Main Axis

3. crossAxisAlignment

تتحكم في محاذاة العناصر على المحور العمودي (Cross Axis).

🧠 Cross Axis في Row هو المحور العمودي (الارتفاع).

4. mainAxisSize

تحدد هل تأخذ Row كل عرض الشاشة أو فقط على قدر محتواها.

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.star),
    Text('محدود'),
  ],
)

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.star),
    Text('محدود'),
  ],
)

5. textDirection

اتجاه عرض العناصر (LTR أو RTL)

6. verticalDirection

يحدد ترتيب العناصر العمودي (متى نستخدم CrossAxisAlignment).

7. clipBehavior

إذا تجاوزت الودجات حدود Row، هل يتم قصّها أم لا؟

🎯 مثال عملي شامل:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: [
    Icon(Icons.home, size: 32),
    Text(
      'الرئيسية',
      style: TextStyle(fontSize: 20),
    ),
    Icon(Icons.settings, size: 32),
  ],
)

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: [
    Icon(Icons.home, size: 32),
    Text(
      'الرئيسية',
      style: TextStyle(fontSize: 20),
    ),
    Icon(Icons.settings, size: 32),
  ],
)

💡 ملاحظات مهمة:

• Row لا تقوم بالتمرير تلقائيًا إذا زادت العناصر عن عرض الشاشة. لحل هذا:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [...],
  ),
)

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [...],
  ),
)

• يجب أن تكون كل العناصر داخل Row بويدجت يمكنها أن تعمل داخل صف أفقي. إذا أردت عنصر يأخذ عرضًا أكبر، استخدم Expanded أو Flexible.

🔁 الفرق بين Expanded و Flexible (داخل Row)

✅ Expanded

يملأ المساحة المتاحة الباقية.

Row(
  children: [
    Expanded(child: Text('هذا يأخذ كل المساحة الباقية')),
    Icon(Icons.arrow_forward),
  ],
)

Row(
  children: [
    Expanded(child: Text('هذا يأخذ كل المساحة الباقية')),
    Icon(Icons.arrow_forward),
  ],
)

✅ Flexible

يسمح بتعديل المساحة، لكن لا يُجبر العنصر على الامتداد الكامل.

Row(
  children: [
    Flexible(child: Text('هذا مرن')),
    Icon(Icons.arrow_forward),
  ],
)

Row(
  children: [
    Flexible(child: Text('هذا مرن')),
    Icon(Icons.arrow_forward),
  ],
)

🧱 مقارنة مختصرة مع Column

✅ خلاصة