LongPressDraggable Explained | Flutter for Web Developers

What’s LongPressDraggable?

The LongPressDraggable class in Flutter allows its child widget to be draggable starting from a long press. This class is particularly useful for creating interactive UIs where users can rearrange items or move them around the screen. Key properties include ‘child’, which is the widget displayed, and ‘feedback’, which is the widget shown while dragging.

Check the official documentation for more.

LongPressDraggable explained for Web Developers

From a web developer’s perspective, the LongPressDraggable class can be compared to drag-and-drop functionalities in web frameworks like React or Angular. While React uses libraries like react-beautiful-dnd for drag-and-drop, Flutter’s LongPressDraggable provides a built-in way to handle dragging with a long press gesture. This makes it easier to implement drag-and-drop features without needing additional libraries.

Example Code

Here is an example of how to use LongPressDraggable:

LongPressDraggable(
  data: 'Item Data',
  feedback: Material(
    child: Container(
      color: Colors.blue,
      width: 100,
      height: 100,
      child: Text('Dragging'),
    ),
  ),
  child: Container(
    color: Colors.red,
    width: 100,
    height: 100,
    child: Text('Long Press Me'),
  ),
  onDragStarted: () {
    print('Drag started');
  },
  onDragCompleted: () {
    print('Drag completed');
  },
  onDraggableCanceled: (velocity, offset) {
    print('Drag canceled');
  },
);

LongPressDraggable Remarks

In conclusion, the LongPressDraggable class is a powerful tool for Flutter developers looking to implement drag-and-drop functionality in their applications. Its intuitive design and integration with Flutter’s widget system make it a great choice for creating interactive user experiences.