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)
)
]
)
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
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.
0 comments: