تخطَّ إلى المحتوى

Drawer

قائمة جانبية منزلقة Drawer

Drawer قائمة جانبية تنزلق من حافة الشاشة — تحتوي عادة روابط التنقّل الرئيسية للتطبيق.

يُمرَّر عبر معامل drawer بـ Scaffold، الذي يضيف تلقائيًا أيقونة فتحها بالـ AppBar ويتعامل مع إيماءة السحب لفتحها وإغلاقها.

الصياغة

Scaffold(
  drawer: Drawer(child: Widget),
)

📄 مثال

Scaffold(
  appBar: AppBar(title: Text('التطبيق')),
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(child: Text('القائمة الرئيسية')),
        ListTile(
          title: Text('الإعدادات'),
          onTap: () => Navigator.pop(context),
        ),
      ],
    ),
  ),
)

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

المعاملالوظيفة
childمحتوى القائمة، غالبًا ListView يبدأ بـ DrawerHeader
widthعرض القائمة المخصّص (اختياري)

💡 نصائح عملية

  • أغلق الـ Drawer بـ Navigator.pop(context) بعد الضغط على أي عنصر بداخله — لا يُغلق تلقائيًا

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

  • نسيان Navigator.pop(context) بعد الانتقال من عنصر بالـ Drawer — يبقى مفتوحًا فوق الشاشة الجديدة

خصائص ذات صلة

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