شرح استخدام ويدجت Drawer في فلاتر

يعتبر Drawer في Flutter أحد العناصر الأساسية التي تستخدم في إنشاء واجهات المستخدم. يسمح للمستخدم بالوصول إلى العديد من الخيارات أو الإعدادات الأخرى في التطبيق. يمكن استخدام Drawer بشكل مختلف وتخصيصه وفقًا لاحتياجات التطبيق. في هذا المقال، سنتعرف على كيفية استخدام Drawer في Flutter بالتفصيل.

استخدام Drawer في Flutter

يمكن استخدام Drawer عن طريق استخدام عنصر Scaffold، حيث يمكن إضافة Drawer كعنصر جانبي في الشريط الجانبي لعنصر Scaffold. ويمكن استخدام العديد من الخصائص المختلفة للتحكم في عرض Drawer، مثل الخصائص التالية:

1- الخاصية drawer:

تستخدم الخاصية drawer لتحديد محتوى Drawer، حيث يمكن استخدام أي عنصر ويجب أن يكون ويدجت بشكل عام، مثل التالي:

Scaffold(
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          child: Text('Drawer header'),
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
        ),
        ListTile(
          title: Text('Item 1'),
          onTap: () {},
        ),
        ListTile(
          title: Text('Item 2'),
          onTap: () {},
        ),
      ],
    ),
  ),
)

“اقرأ أيضاً: شرح استخدام PositionedDirectional في فلاتر“

2- الخاصية drawerScrimColor:

تستخدم الخاصية drawerScrimColor لتحديد لون الظل المستخدم لتعتيم الشاشة عند فتح Drawer، ويمكن تحديد اللون باستخدام القيمة Color، مثل التالي:

Scaffold(
  drawer: Drawer(
    child: ...
  ),
  drawerScrimColor: Colors.black.withOpacity(0.5),
)

3- الخاصية drawerEdgeDragWidth:

تستخدم الخاصية drawerEdgeDragWidth لتحديد عرض المساحة التي يتم سحبها لفتح Drawer، ويمكن تحديد العرض بالبكسل، مثل التالي:

Scaffold(
  drawer: Drawer(
    child: ...
  ),
  drawerEdgeDragWidth: 50,
)

“اقرأ أيضاً: شرح استخدام ويدجت DropdownButton في فلاتر“

4- الخاصية endDrawer:

تستخدم الخاصية endDrawer لتحديد Drawer الجانب الأيمن، ويمكن استخدام أي عنصر ويجب أن يكون ويدجت بشكل عام، مثل التالي:

Scaffold(
  endDrawer: Drawer(
    child: ...
  ),
)

5- الخاصية endDrawerEnableOpenDragGesture:

تستخدم الخاصية endDrawerEnableOpenDragGesture لتحديد ما إذا كان يتم تفعيل إيماءة السحب لفتح Drawer الجانب الأيمن، ويمكن تحديد القيمة بواسطة القيمة true أو false، مثل التالي:

Scaffold(
  endDrawer: Drawer(
    child: ...
  ),
  endDrawerEnableOpenDragGesture: true,
)

يمكن استخدام Drawer في Flutter بشكل مختلف وتخصيصه وفقًا لاحتياجات التطبيق. يمكن التحكم في عرض Drawer باستخدام الخاصية drawerWidth، وتحديد لون الظل المستخدم لتعتيم الشاشة عند فتح Drawer باستخدام الخاصية drawerScrimColor، وتحديد عرض المساحة التي يتم سحبها لفتح Drawer باستخدام الخاصية drawerEdgeDragWidth. يمكن أيضًا استخدام Drawer الجانب الأيمن باستخدام الخاصية endDrawer. ويمكن تفعيل إيماءة السحب لفتح Drawer الجانب الأيمن باستخدام الخاصية endDrawerEnableOpenDragGesture. بالتالي، يمكن استخدام هذه الخصائص لتخصيص Drawer وفقًا لاحتياجات التطبيق.