How to implement dragging of widgets like Instagram stories in Flutter ?

This is the second article in ''Dive deep in the Flutter'' series which takes an in-depth look at Flutter widgets.

In this article, we are going to dive deep into the Draggable Widget, Positioned widget, and Stack Widget of Flutter and achieve what we actually wanted.

Exploring Draggable Widget and DragTarget 

Draggable and DragTarget help in dragging the widgets on the screen. Let's discover more about Draggable widget and discuss it in detail.

Draggable

 Draggable(  
    child: Container(  
    height: 100.0,  
   width: 100.0,  
   color: Colors.red,  
  ),  
   feedback: Container(  
  height: 100.0,  
   width: 100.0,  
   color: Colors.red,  
  ),  
    childWhenDragging: Container(),  
 ),  

These are the three most essential parts of the Draggable Widget

1. Child - This Child parameter contains the main widget that displays on the screen or merely the one which we are dragging.

2. Feedback - The Feedback parameter shows the widget that helps to track the user's fingers on the screen or simply it is the widget that our eyes see while dragging the original widget.

3. ChildWhenDragging - The ChildWhenDragging helps to display the initial position of the child being dragged with the help of a widget.

Exploring Stack Widget

A widget that's helps arrange widgets relative to the box.

Stack Widget helps in the arrangement of the widgets by overlapping children in a straightforward way.

For example, in Instagram stories, if we use 2 or more stickers they have to be stacked on one another and this can be achieved easily using Stack Widget.

                               

credits: https://api.flutter.dev/flutter/widgets/Stack-class.html#widgets.Stack.1

Simple Code to explain Stack widget

 Stack(  
  children: <Widget>[  
   // Max Size  
   Container(  
    height: 100.0,  
    width: 100.0,  
    color: Colors.green,  
   ),  
   Container(  
    color: Colors.blue,  
    height: 90.0,  
    width: 0.0,  
   ),  
   Container(  
    color: Colors.pink,  
    height: 150.0,  
    width: 150.0,  
   )  
  ],  
 ),  

There is only one crucial part of the Stack widget.

1. Children - The Children parameter is used to store and display the list of widgets in the Stack Widget.

Exploring Positioned Widget

Positioned widget is used to place the widgets inside the Stack Widget. It must be used as a descendant to Stack Widget. We can easily position the Widgets with respect to the parents.

Simple Code for Positioned

 Stack(  
    children: [  
    MyWidget(),  
    Positioned(  
    bottom: 20,  
    left: 20,  
    child: MyWidget(color: Colors.blue),  
    ),  
    Positioned(  
    top: 50,  
    right: 50,  
    child: MyWidget(color: Colors.red)  
    )  
    ]  
 )  

There are five crucial parts of Position Widget.

1. Bottom -  The Bottom parameter allows us to align the widget about Bottom of the Parent Widget

2. Top-  The Top parameter will enable us to align the widget about Top of the Parent Widget

3. Left-  The Left parameter will allow us to align the widget about Left of the Parent Widget.

4. Right- The Right parameter allows us to align the widget about Right of the Parent Widget.

A Drag and drop Application

Drag Drop Application

This is the source code to the project which I have already created. Now let's try to understand this.

The main.dart consists of a stateless widget named MyApp which implements MaterialApp Widget with a Scaffold widget in it which in turn has a custom App widget as its body parameter.

The App class contains a Stack widget which can have a no of widgets in it. In this example, I declared two drag box widgets. 

DragBox is a customized stateful widget that returns positioned widget containing a draggable widget in it.

OnDraggableCancelled is the parameter that you'll notice, and yes, we haven't

discussed it yet. This parameter is called when the drag gestures stop, and here it is

used to get the current position of the draggable item and update the parameters in

the positioned widget.

Conclusion

In this app, you learned about how you can use the Draggable widget, Positioned. Widget, and Stack Widget to implement dragging in the futter.

Thanks for reading which one of the above widgets is your favourite?

Any queries and doubts are welcomed... just leave your questions in the comment section, and I'll answer it asap.