الفصل الخامس – القسم الرابع: مكونات العرض (Display Components)

لماذا هذا القسم مهم؟

بعد ما تعلمنا الأزرار و إدخال البيانات، يجي الدور على المكونات اللي تعرض للمستخدم المعلومات والرسائل بشكل منظم وجذاب.
هنا نستخدم عناصر Display Components اللي يقدمها Material Design.

1. Card

البطاقة هي عنصر أساسي لعرض محتوى بشكل أنيق.
تخيلها كلوحة صغيرة فيها صورة + عنوان + نص قصير + زر.

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('عنوان البطاقة', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text('هذا نص داخل البطاقة'),
        SizedBox(height: 8),
        ElevatedButton(onPressed: () {}, child: Text('اضغط هنا')),
      ],
    ),
  ),
)

📌 الاستخدامات الشائعة: عرض المنتجات، المقالات، المعلومات الشخصية.

2. ListTile

عنصر جاهز لعرض نص + أيقونة + عنصر إضافي في صف واحد.

ListTile(
  leading: Icon(Icons.person),
  title: Text('أحمد محمد'),
  subtitle: Text('مطور Flutter'),
  trailing: Icon(Icons.arrow_forward),
  onTap: () {},
)

📌 الاستخدامات: قوائم الإعدادات، جهات الاتصال، الرسائل.

3. Dialog

نافذة منبثقة صغيرة لعرض رسالة أو تأكيد.

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text('تأكيد'),
      content: Text('هل تريد حذف هذا العنصر؟'),
      actions: [
        TextButton(onPressed: () => Navigator.pop(context), child: Text('إلغاء')),
        ElevatedButton(onPressed: () {}, child: Text('نعم')),
      ],
    );
  },
);

📌 الاستخدامات: التأكيد قبل الحذف – عرض رسالة مهمة.

4. SnackBar

رسالة قصيرة تظهر أسفل الشاشة لفترة مؤقتة.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('تم الحفظ بنجاح')),
);

📌 الاستخدامات: إشعارات سريعة بعد حدث ما (حفظ، حذف، إرسال).

5. Tooltip

رسالة صغيرة تظهر عند تمرير الماوس أو الضغط المطوّل على عنصر.

Tooltip(
  message: 'إضافة إلى المفضلة',
  child: Icon(Icons.favorite),
)

📌 الاستخدامات: توضيح وظيفة الأيقونات.

6. Chip

عنصر صغير لعرض كلمة مفتاحية أو خيار سريع.

Chip(
  label: Text('Flutter'),
  avatar: Icon(Icons.code),
  onDeleted: () {},
)

الاستخدامات: عرض الوسوم (Tags) – خيارات بحث سريعة – تحديد فلاتر.

7. Progress Indicators

لعرض حالة تقدم عملية معينة (تحميل، رفع، مزامنة).

// دائري
CircularProgressIndicator()

// خطي
LinearProgressIndicator(value: 0.6) // 60%

الاستخدامات: انتظار تحميل بيانات – رفع ملفات.

الخلاصة

• Card: عرض معلومات بشكل أنيق.
• ListTile: صف واحد مع أيقونة + نصوص.
• Dialog: نافذة منبثقة للتأكيد/الإشعارات.
• SnackBar: رسالة قصيرة بأسفل الشاشة.
• Tooltip: شرح إضافي عند التمرير/الضغط.
• Chip: كلمات مفتاحية/خيارات سريعة.
• Progress Indicators: عرض حالة التحميل.