Drawer

📌 ما هو الـ Drawer؟

الـ Drawer هو قائمة جانبية (عادةً تُسحب من اليسار في اللغات LTR ومن اليمين في RTL مثل العربية) تُستخدم لعرض خيارات التنقل Navigation أو روابط سريعة داخل التطبيق.
يُدمج غالبًا مع Scaffold في الخاصية:

Scaffold(
  drawer: Drawer(...),       // القائمة على اليسار (أو يمين بالعربية)
  endDrawer: Drawer(...),    // قائمة جانبية إضافية على الطرف الآخر
)
Dart
🧩 التركيب الأساسي

الـ Drawer هو مجرد ويدجت يحتوي بداخله عناصر أخرى (عادةً ListView أو Column).

مثال بسيط:

Scaffold(
  appBar: AppBar(title: Text("مثال Drawer")),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          decoration: BoxDecoration(color: Colors.teal),
          child: Text("القائمة الرئيسية", style: TextStyle(color: Colors.white)),
        ),
        ListTile(
          leading: Icon(Icons.home),
          title: Text("الصفحة الرئيسية"),
          onTap: () {
            // إغلاق القائمة + تنفيذ الإجراء
            Navigator.pop(context);
          },
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text("الإعدادات"),
          onTap: () {},
        ),
      ],
    ),
  ),
  body: Center(child: Text("المحتوى")),
);
Dart
⚙️ أهم الخصائص (Drawer Widget)
  • child: Widget?
    عادةً ListView أو Column تحتوي عناصر القائمة.
  • elevation: double
    للتحكم في ظل القائمة عند فتحها (افتراضي: 16).
  • backgroundColor: Color?
    لون الخلفية (يمكن تغييره لتصميم مخصص).
  • shape: ShapeBorder?
    لتغيير شكل الحواف (مثلاً زوايا دائرية). shape: RoundedRectangleBorder( borderRadius: BorderRadius.horizontal(right: Radius.circular(20)), )
  • semanticLabel: String?
    وصف للقارئ الصوتي (Accessibility).
🖼️ ويدجت مساعدة مع Drawer
1. DrawerHeader

جزء علوي ثابت عادةً يُستخدم لوضع:

  • صورة بروفايل.
  • اسم المستخدم/البريد.
  • خلفية ملوّنة أو صورة.

مثال:

DrawerHeader(
  decoration: BoxDecoration(color: Colors.blue),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      CircleAvatar(radius: 30, backgroundImage: AssetImage("assets/user.png")),
      SizedBox(height: 10),
      Text("أهلاً بك!", style: TextStyle(color: Colors.white, fontSize: 18)),
      Text("[email protected]", style: TextStyle(color: Colors.white70)),
    ],
  ),
),
Dart
UserAccountsDrawerHeader(
  accountName: Text("اسم المستخدم"),
  accountEmail: Text("[email protected]"),
  currentAccountPicture: CircleAvatar(
    backgroundColor: Colors.white,
    child: Icon(Icons.person, size: 40),
  ),
  decoration: BoxDecoration(color: Colors.teal),
  margin: EdgeInsets.zero,
)
Dart

2. ListTile

العنصر القياسي داخل Drawer (أي خيار في القائمة):

  • leading: أيقونة/صورة على اليسار.
  • title: النص الرئيسي.
  • subtitle: نص فرعي (اختياري).
  • trailing: ويدجت إضافية على الطرف الآخر (مثلاً سهم).
  • onTap: الإجراء عند الضغط (عادةً تنقّل أو إغلاق Drawer).
🧭 كيف يتم فتح وإغلاق Drawer؟
  • إذا كان لديك Scaffold مع drawer → سيظهر زر القائمة (hamburger menu) تلقائيًا في الـ AppBar.leading.
  • لفتحها/إغلاقها برمجيًا: Scaffold.of(context).openDrawer(); // يفتح drawer Scaffold.of(context).openEndDrawer(); // يفتح endDrawer Navigator.pop(context); // يغلق drawer

⚠️ ملاحظة: يجب استدعاء Scaffold.of(context) من context داخل الـ Scaffold،
إذا كنت داخل AppBar ستحتاج إلى Builder:

actions: [
  Builder(
    builder: (context) => IconButton(
      icon: Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openEndDrawer(),
    ),
  ),
]
Dart
🎯 أماكن وحالات الاستخدام
  • تطبيقات متعددة الصفحات: لتوفير قائمة تنقل (Home, Settings, About…).
  • تطبيقات مع حساب مستخدم: لعرض معلومات الحساب، تسجيل خروج، إعدادات.
  • إعدادات ثانوية: لإخفاء خيارات لا تُستخدم كثيرًا (حتى لا تملأ الشاشة الرئيسية).
✅ نصائح ومحاذير
  • لا تضع محتوى كثير داخل Drawer → الأفضل 5–8 خيارات أساسية فقط.
  • إذا أردت تصميم حديث أكثر → استخدم NavigationDrawer (متوفرة مع Material 3).
  • لا تنسَ إغلاق الـ Drawer قبل الانتقال لصفحة جديدة: onTap: () { Navigator.pop(context); // يغلق القائمة Navigator.push(...); // ينتقل للصفحة }
  • لا تستخدم Drawer في صفحات كثيرة التبويبات (Tabs) → هناك BottomNavigationBar أفضل في هذه الحالة.
📌 مثال كامل مع endDrawer أيضًا
Scaffold(
  appBar: AppBar(
    title: Text("مثال Drawer"),
    actions: [
      Builder(
        builder: (context) => IconButton(
          icon: Icon(Icons.account_circle),
          onPressed: () => Scaffold.of(context).openEndDrawer(),
        ),
      ),
    ],
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          decoration: BoxDecoration(color: Colors.teal),
          child: Text("القائمة الرئيسية", style: TextStyle(color: Colors.white)),
        ),
        ListTile(leading: Icon(Icons.home), title: Text("الرئيسية")),
        ListTile(leading: Icon(Icons.settings), title: Text("الإعدادات")),
      ],
    ),
  ),
  endDrawer: Drawer(
    child: Center(child: Text("قائمة إضافية (endDrawer)")),
  ),
  body: Center(child: Text("المحتوى هنا")),
);
Dart