Flutter's Draggable and DragTarget: The Drag-and-Drop Pair
Build drag-and-drop UI in Flutter with the Draggable and DragTarget widget pair. A Draggable carries data, and a DragTarget acts as a mailbox that accepts it. Use them for reordering lists. The footgun: drops fail silently if the data types don't match.
Why it exists
To provide a declarative, widget-based way to handle complex user gestures like dragging and dropping items across the screen. This abstracts away the low-level complexity of tracking pointer events, managing state, and rendering temporary visuals.
The mental model
A Draggable is a movable package. It has three visual states: its normal child view, the feedback view that follows your finger, and the optional childWhenDragging view left in its original spot. It also carries an invisible data payload. A DragTarget is a stationary mailbox. It inspects the data from an incoming Draggable and decides whether to accept the package.
How it works
When a drag gesture begins on a Draggable, it displays its feedback widget on the screen's Overlay, following the pointer. The original spot can show the childWhenDragging widget or an empty space. As the feedback widget moves over a DragTarget, the target's builder function is called, allowing it to change appearance (e.g., highlight). When the user drops the widget, if it's over a compatible DragTarget, the target's onAccept callback fires with the data. If accepted, the Draggable's onDragCompleted is called; otherwise, onDraggableCanceled is called.
When to use it
Use this pair for any feature requiring users to move an element. Common cases include: reordering items in a list, moving a file to a "delete" icon, dragging a product into a shopping cart, or organizing tasks on a kanban board.
When not to use it
For simple taps or swipes, use GestureDetector. For complex, continuous gestures that don't involve a distinct "drop" action (like drawing on a canvas), you might use lower-level pointer event listeners. Draggable and DragTarget are specifically for the "pick up and drop" interaction model.
One canonical example
A simple app has several colored containers wrapped in Draggable widgets, each with its Color object as data. A central DragTarget widget displays a message. When a colored container is dragged and dropped onto the target, the onAccept callback receives the Color data and updates its own state to display that color, confirming the drop was successful.
Interview question
What is the consequence if a Draggable is dropped onto a DragTarget, but their data types do not match?
- a.The DragTarget's onAccept callback is invoked, but the data parameter will be null.
- b.An error message is displayed to the user, indicating a type mismatch.
- c.The Draggable's onDragCompleted callback is called, but the DragTarget ignores the data.
- d.The drop fails silently, and the Draggable's onDraggableCanceled callback is called.Correct
Why? this is the answer
The card explicitly states that "drops fail silently if the data types don't match." In such a scenario, the drop is not accepted, leading to the Draggable's onDraggableCanceled callback being invoked, rather than an error message or the onAccept callback.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles