Drag and drop in flutter without any package
Alright , let’s get right into it.
So to implement drag and drop we are going to use two widgets that flutter provides us in the house, namely — “Draggable” and “DragTarget”.
Draggable, is that widget which we are going to drag and DragTarget as the name suggest will be, the basket where that draggable will go. We are going to make a Grid of our fav aesthetic pictures. So with Draggable, we get properties of our concern— child, childWhenDragging & feedback, onDragStarted(), onDragEnd().
GridView.custom(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCountNumber(),
crossAxisSpacing: 10,
mainAxisSpacing: 10),
childrenDelegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Draggable<int>(
data: index,
feedback: Material(
child: GridTile(
child: Image.network(
images[index],
fit: BoxFit.cover,
height: 400,
width: 300,
),
),
),
childWhenDragging: Container(
height: 400,
width: 300,
alignment: Alignment.center,
color: Colors.transparent,
// child: Text('grid item $index'),
),
child: GridTile(
child: Image.network(
images[index],
fit: BoxFit.cover,
// height: 200,
// width: 200,
),
),
onDragStarted: () {
setState(() {
isDragStarted = true;
});
},
onDragEnd: (val) {
setState(() {
isDragStarted = false;
});
},
);
},
childCount: images.length,
),
)“child”, is the main widget which we will call the Original. “childWhenDragging”, is the clone of the Original, which is to be displayed to the user, in place of where Original was earlier before, since the Original is now being considered as in dragging state and thus “feedback”, is the widget that is going to be dragged and dropped.
onDragStarted() and onDragEnd() , are as the name suggest called whenever a drag action is started and when it ends. (They play a big role in this)
Now, when it comes to DragTarget, we have — builder, onAccept(), onWillAccept().
builder(), has three arguments which are — BuildContext and two lists which can be considered as Candidate Data and Rejected Data. But for this we won’t need them so we will define our builder like —
builder(_,__,___) => OurWidget();OnAccept(), is a function which as the name suggests when as acceptable piece of data is dropped onto the DragTarget.
And onWillAccept(), is a function which returns a boolean statement to tell whether the current DragTarget is ready to accept the incoming data or not.
Note: It’s is very Important to not forget to send a dataType or generics to Draggable and DragTarget. So that it can understand that you are sending the right data.
i.e — DragTarget<OurDataType>() and Draggable<OurDataType>()This is all we need to implement drag and drop in flutter in a grid view. How you might ask?
Well, the trick as is turns out is very simple, you just have to make the same number of gridTiles for the DragTarget as you would make for the Draggable ‘s.
But it doesn’t solve the problem as to how flutter will know on the same place whether its Draggable or DragTarget. Well, we have just the right widget for that.
Yes! you might have guessed it by now. We could use — Stack().
So with Stack we just need a boolean variable to be able to bring in front the DragTarget’ s when we are dragging and then the Draggables, when we aren’t, and we would make use of our function onDragStarted() and onDragEnd(). Yes, it’s that simple. And that’s it. This is how you will implement Drag and drop in flutter without any package.
Here’s a glimpse of how it happens —
That’s all for this article, I hope it helps! If it did then please consider 👏👏 (also did you know, you can do it 50 times in a row) or you can also buy me a coffee. Your simple gesture motivates me and gives feedback for my work. Thanks!
