Flutter provides a variety of Widgets through which we can build any kind of UI. But more than a design, your app should be interactive so that it can be easily accessed to users. In this article, I will be building the following app which makes use of Draggable and DragTarget. So, first of all, let’s look at what are Draggable and DragTarget in Flutter.

Draggable

As the name suggests, Draggable means a widget which can be dragged or moved on the screen. Let’s take an example :

Draggable example

Here’s the code for this:

Syntax for Draggable

Draggable class generally made of four main parameters :

child: Widget which can be dragged or to be displayed when draggable is stationary. feedback: Widget to be displayed when drag is underway. childWhenDragging: Widget to be displayed in the original place of Draggable when drag is underway. data: It contains the information dropped by Draggable at DragTarget, it is useful when we are using multiple Draggable and DragTarget.

The draggable class provides some callback functions, such as :