Flutter 5: Drag-and-Drop & Gestures — Simple Guide with Examples

Introduction

This guide provides a simple overview of implementing drag-and-drop and gesture functionalities in Flutter 5. It highlights essential widgets like BottomSheet, LongPressDraggable, and GestureDetector, with practical code examples.

Flutter makes it easy to add interactive elements to your applications. Below are some essential widgets you should know to implement drag-and-drop and gesture functionality.

BottomSheet — Slide-Up Modal from Bottom

Used to show extra options or actions from the bottom of the screen.

showModalBottomSheet(
 context: context,
 builder: (context) => Container(
 height: 200,
 color: Colors.white,
 child: Center(child: Text('Hello from the bottom!')),
 ),
);

LongPressDraggable — Drag on Long Press

Starts dragging a widget after a long press.

LongPressDraggable(
 data: 'Dragged!',
 feedback: Material(child: Icon(Icons.star, color: Colors.orange, size: 30)),
 child: Icon(Icons.star_border, size: 30),
)

Draggable — Instantly Start Dragging

Starts the drag immediately on touch (no long press required).

Draggable(
 data: 'Item',
 feedback: Material(child: Icon(Icons.ac_unit, size: 30)),
 child: Icon(Icons.ac_unit_outlined, size: 30),
)

DragTarget — Drop Zone for Draggables

Receives data when something is dropped onto it.

DragTarget<String>(
 onAccept: (data) => print('Dropped: $data'),
 builder: (context, _, __) => Container(
 height: 100,
 width: 100,
 color: Colors.blue[100],
 child: Center(child: Text('Drop Here')),
 ),
)

Dismissible — Swipe to Remove Widgets

Enables swipe-to-dismiss functionality for list items.

Dismissible(
 key: Key('item1'),
 onDismissed: (direction) => print('Item removed'),
 background: Container(color: Colors.red),
 child: ListTile(title: Text('Swipe me')),
)

GestureDetector — Catch Touch Gestures

Detects taps, long presses, drags, and more.

GestureDetector(
 onTap: () => print('Tapped!'),
 onLongPress: () => print('Long pressed!'),
 child: Container(
 padding: EdgeInsets.all(20),
 color: Colors.greenAccent,
 child: Text('Tap or Hold Me'),
 ),
)

💡 Pro Tip: Combine GestureDetector with any widget to make it touch-sensitive without changing its appearance.