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

في Flutter، يمكن استخدام العديد من المكونات لتصميم واجهات المستخدم ، بما في ذلك Draggable ، الذي يستخدم لإضافة إمكانية سحب الويدجت من مكان إلى آخر. يمكن استخدام Draggable في Flutter لتحسين تفاعل المستخدم مع التطبيق.

في هذا المقال ، سنشرح Draggable ونوضح جميع خصائصه بالتفصيل ونوضح كيفية استخدامه في تصميم واجهات المستخدم.

ما هو Draggable في فلاتر؟

Draggable هو واحد من المكونات الأساسية في Flutter والتي تستخدم لإضافة إمكانية سحب الويدجت من مكان إلى آخر. يمكن استخدام Draggable في Flutter لتحسين تفاعل المستخدم مع التطبيق.

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

خصائص Draggable

يمكن تحديد خصائص Draggable باستخدام العديد من الخصائص التي تحدد شكل ومظهر Draggable والتحكم في المحتوى. يمكن استخدام العديد من الخصائص في Draggable في Flutter.

1- child

تسمح هذه الخاصية بتحديد الويدجت التي يتم سحبها.

Draggable(
  child: FlutterLogo(
    size: 100,
  ),
  feedback: FlutterLogo(
    size: 100,
  ),
  childWhenDragging: Container(),
  onDragStarted: () {},
  onDraggableCanceled: (Velocity velocity, Offset offset) {},
  onDragEnd: (DraggableDetails details) {},
)

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

2- feedback

تسمح هذه الخاصية بتحديد الويدجت التي يتم عرضها أثناء سحب الويدجت.

Draggable(
  child: FlutterLogo(
    size: 100,
  ),
  feedback: FlutterLogo(
    size: 100,
  ),
  childWhenDragging: Container(),
  onDragStarted: () {},
  onDraggableCanceled: (Velocity velocity, Offset offset) {},
  onDragEnd: (DraggableDetails details) {},
)

3- childWhenDragging

تسمح هذه الخاصية بتحديد الويدجت التي يتم عرضها بينما يتم سحب الويدجت.

Draggable(
  child: FlutterLogo(
    size: 100,
  ),
  feedback: FlutterLogo(
    size: 100,
  ),
  childWhenDragging: Container(),
  onDragStarted: () {},
  onDraggableCanceled: (Velocity velocity, Offset offset) {},
  onDragEnd: (DraggableDetails details) {},
)

4- onDragStarted

تسمح هذه الخاصية بتحديد الإجراء الذي يتم تنفيذه عند بدء سحب الويدجت.

Draggable(
  child: FlutterLogo(
    size: 100,
  ),
  feedback: FlutterLogo(
    size: 100,
  ),
  childWhenDragging: Container(),
  onDragStarted: () {},
  onDraggableCanceled: (Velocity velocity, Offset offset) {},
  onDragEnd: (DraggableDetails details) {},
)

5- onDraggableCanceled

تسمح هذه الخاصية بتحديد الإجراء الذي يتم تنفيذه عند إلغاء سحب الويدجت.

Draggable(
  child: FlutterLogo(
    size: 100,
),
  feedback: FlutterLogo(
    size: 100,
  ),
  childWhenDragging: Container(),
  onDragStarted: () {},
  onDraggableCanceled: (Velocity velocity, Offset offset) {},
  onDragEnd: (DraggableDetails details) {},
)

6- onDragEnd

تسمح هذه الخاصية بتحديد الإجراء الذي يتم تنفيذه عند انتهاء سحب الويدجت.

Draggable(
  child: FlutterLogo(
    size: 100,
  ),
  feedback: FlutterLogo(
    size: 100,
  ),
  childWhenDragging: Container(),
  onDragStarted: () {},
  onDraggableCanceled: (Velocity velocity, Offset offset) {},
  onDragEnd: (DraggableDetails details) {},
)

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

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