FLUTTER DRAGGABLE & DRAGTARGET

surya M
3 min readAug 26, 2021

--

Introduction:

In this article, we will look at flutter Draggable and Dragtarget widgets.

Draggable and Dragtarget allow us to drag a widget across the screen.

To demonstrate draggable and drag target widgets we are going to use sized Box widget.

In this example, define scaffold body with column widget in the column Children we use sized box widget.

We use the height, width as 50, 150 and in the child property we use material widget to provide color, shape for the sized box.

Draggable:

A Draggable makes a widget movable around the screen.

Properties of Draggable widget:

Child:

The child parameter is the widget that will be displayed when the draggable is stationary

Feedback:

The feedback is the widget that will be displayed when the widget is being dragged.

Child When Dragging:

The childWhenDragging parameter takes the widget to display in the original place of a child when the widget is being dragged.

on Drag Started :

This is called when a drag is started on a widget.

onDragCompleted :

When a Draggable is dragged to a Dragtarget and accepted, this callback is called.

onDragCancelled :

When a Draggable does not reach a Dragtarget or is rejected, this callback is fired.

Example:

DragTarget:

While a Draggable allows a widget to be dragged, a Dragtarget provides a destination for the draggable.

Properties of Dragtarget:

Builder:

The builder builds the actual widget inside the Dragtarget. This function is called every time a Draggable is hovered over the Dragtarget or is dropped onto it.

This function has three parameters, context, candidate Data, and rejected Data.

candidateData:

is the data of a Draggable whilst it is hovering over the Dragtarget, ready for acceptance by Dragtarget.

rejected Data:

is the data of a Draggable hovering over a Dragtarget at the moment it is not accepted.

on Will Accept:

on will Accept is a function that gives us the Draggable data for us to decide whether to accept or reject it.

on Accept:

If the Draggable is dropped onto the Dragtarget and on will Accept returns true, then on Accept is called.

Example:

Thank you..

--

--

surya M

Hey there! I'm Surya, a passionate software developer with a knack for crafting elegant solutions using JavaScript.