LongPressDraggable Widget – Flutter Widget Guide By FlutterAgency

Draggable Widget allows a widget to be dragged, a DragTarget provides a destination for the draggable. A widget that can be dragged from to a DragTarget Widget. In this article, we will go through LongPressDraggable Widget.

When a draggable widget recognizes the start of a drag gesture, it displays a feedback widget that tracks the user’s finger across the screen. If the user lifts their finger while on top of a DragTarget, that target is given the opportunity to accept the data carried by the draggable.

What is LongPressDraggable Widget?

LongPressDraggable Widget is used to creates a widget that can be dragged starting from LongPress.

The Default Constructor of it will have a code snippet like below :

  LongPressDraggable<T>
  ({
   Key key,
   @required Widget child,
   @required Widget feedback,
   T data,
   Axis axis,
   Widget childWhenDragging,
   Offset feedbackOffset: Offset.zero,
   DragAnchor dragAnchor: DragAnchor.child,
   int maxSimultaneousDrags,
   VoidCallback onDragStarted,
   DraggableCanceledCallback onDraggableCanceled,
   DragEndCallback onDragEnd,
   VoidCallback onDragCompleted,
   bool hapticFeedbackOnStart: true,
   bool ignoringFeedbackSemantics: true,
}
);

In the Above constructor, all fields marked with @required must not be empty.

Property:

Key key: Controls how one widget replaces another widget in the tree.
Widget child: The widget below this widget in the tree.
feedback: Feedback property show the widget to show under the pointer when a drag is underway.
Axis affinity: affinity Controls how this widget competes with other gestures to initiate a drag. If affinity is null, this widget initiates a drag as soon as it recognizes a tap down gesture, regardless of any directionality. If affinity is horizontal or vertical, then this widget will compete with other horizontal or vertical, respectively gestures.
T data: The data that will be dropped by this draggable.
Axis axis: The Axis to restrict this draggable’s movement if specified.
Widget childWhenDragging: The widget to display instead of a child when one or more drags are underway.
Offset feedbackOffset: An immutable 2D floating-point offset. Generally speaking, Offsets can be interpreted in two ways: As representing a point in Cartesian space a specified distance from a separately-maintained origin. For example, the top-left position of children in the RenderBox protocol is typically represented as an Offset from the top left of the parent box. As a vector that can be applied to coordinates. For example, when painting a RenderObject, the parent is passed an Offset from the screen’s origin which can add to the offsets of its children to find the Offset from the screen’s origin to each of the children.
DragAnchor dragAnchor: Where this widget should be anchored during a drag.
int maxSimultaneousDrags: How many simultaneous drag to support. When null, no limit is applied. Set this to 1 if you want to only allow the drag source to have one item dragged at a time. Set this to 0 if you want to prevent the draggable from actually being dragged.
onDragStarted: This is called when a drag is started on a widget.
DraggableCanceledCallback onDraggableCanceled:onDraggableCanceled is called when the draggable is dropped without being accepted by a DragTarget Widget.
onDragCompleted: When a draggable is dragged to a DragTarget Widget and accepted, this callback is called. We have a separate article for it. Users can read it from DragTarget Widget.
bool hapticFeedbackOnStart: Whether haptic feedback should be triggered on drag start.
bool ignoringFeedbackSemantics: Whether the semantics of the feedback widget is ignored when building the semantics tree.

How to use LongPressDraggable Widget in Flutter?

The following code snippet tells us how to implement LongPressDraggable Widget in Flutter.

Offset _offset = Offset.zero;

LayoutBuilder(
        builder: (context, constraints) {
          return Stack(
            children: [
              Positioned(
                left: _offset.dx,
                top: _offset.dy,
                child: LongPressDraggable(
                  feedback: const FlutterLogo(),
                  child: const FlutterLogo(),
                  onDragEnd: (details) {
                    setState(() {
                      final adjustment = MediaQuery.of(context).size.height -
                          constraints.maxHeight;
                      _offset = Offset(
                          details.offset.dx, details.offset.dy - adjustment);
                    });
                  },
                ),
              ),
            ],
          );
        },
      ),

We will get output like below:

LongPressDraggable Widget

Conclusion

In this article, we have been through What is LongPressDraggable Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading!!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.