LongPressDraggable In Flutter
A Draggable Widget permits a widget to be dragged, a DragTarget gives an objective to the draggable. A widget that can be dragged from to a DragTarget Widget.
At the point when a draggable widget perceives the beginning of a drag gesture, it shows a feedback widget that tracks the client’s finger across the screen. On the off chance that the user lifts their finger while on top of a DragTarget, that target is offered the chance to accept the data conveyed by the draggable.
In this article, we will explore the LongPressDraggable In Flutter. We will execute a demo program of the LongPressDraggable and how to create a widget that can be dragged beginning from a long press utilizing LongPressDraggable it in your flutter applications.
Table Of Contents::
LongPressDraggable:
It is utilized to makes a widget that can be dragged beginning from LongPress. On the off chance that you need to make a widget draggable after the client plays out a long press on it, Flutter has a widget for that reason. LongPressDraggable is a widget that permits its child to be dragged beginning from a long press. What you need to do is wrap the draggable widget as the child of the LongPressDraggable widget.
Demo Module :
This demo video shows how to use LongPressDraggable in a flutter. It shows how LongPressDraggable will work in your flutter applications. It tells you the best way to utilize it, including how to set the dragging axis, set the child to show while dragging, add data to the draggable, just as handle events. It will be shown on your device.
Constructor:
To utilize LongPressDraggable, you need to call the constructor underneath:
const LongPressDraggable({
Key? key,
required Widget child,
required Widget feedback,
T? data,
Axis? axis,
Widget? childWhenDragging,
Offset feedbackOffset = Offset.zero,
DragAnchor dragAnchor = DragAnchor.child,
int? maxSimultaneousDrags,
VoidCallback? onDragStarted,
DragUpdateCallback? onDragUpdate,
DraggableCanceledCallback? onDraggableCanceled,
DragEndCallback? onDragEnd,
VoidCallback? onDragCompleted,
this.hapticFeedbackOnStart = true,
bool ignoringFeedbackSemantics = true,
})
There are two contentions you need to pass, child and feedback. child is the widget that can be dragged beginning from a long press. You likewise need to characterize the widget to be displayed under the pointer during a drag as feedback.
Properties:
There are some properties of LongPressDraggable are:
- > Key: This property is used to controls how one widget replaces another widget in the tree.
- > child: This property is used to the widget below this widget is in the tree.
- > feedback: This property is used to shows the widget to show under the pointer when a drag is underway.
- > data: This property is used for the data that will be dropped by this draggable.
- > Axis: This property is used Axis to restrict this draggable’s movement if specified.
- > childWhenDragging: This property is utilized regarding the widget to show rather than a child when at least one drags are in progress.
- > feedbackOffset: This property is utilized to set the hit test target point for finding a drags target. Defaults to
Offset.zero - > dragAnchor: This property is utilized to where this widget should be anchored during a drag.
- > maxSimultaneousDrags: How many simultaneous drag to support. When null, no limit is applied. Set this to 1 if you want to only allow the drag source to have one item dragged at a time. Set this to 0 if you want to prevent the draggable from actually being dragged.
- > onDragStarted: This property is called when a drag is started on a widget.
- > onDraggableCanceled: This property is called when a drag is started on a widget. called when the draggable is dropped without being accepted by a DragTarget Widget.
- > onDragCompleted: When a draggable is dragged to a DragTarget Widget and accepted, this callback is called. We have a separate article for it. Users can read it from DragTarget Widget.
- > hapticFeedbackOnStart: Whether haptic feedback should be triggered on drag start.
- > ignoringFeedbackSemantics: Whether the semantics of the feedback widget is ignored when building the semantics tree.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
First, we will create a variable of Offset that is equal to Offset(100,250). Generally, Offset(dy, dx) will be zero.
Offset _offset = Offset(100,250);
In the body, we will add LayoutBuilder() widget. In this widget, we will add a builder and pass argument context, constraints in the bracket. Then, we will return a Stack() widget. We will add Positioned() widget. Inside we will add left define _offset. dx and top define _offset.dy.
LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: [
Positioned(
left: _offset.dx,
top: _offset.dy,
child: LongPressDraggable(
feedback: Image.asset("assets/logo.png",height: 100,color: Colors.cyan,),
child: Image.asset("assets/logo.png",height: 100,),
onDragEnd: (details) {
setState(() {
final adjustment = MediaQuery.of(context).size.height -
constraints.maxHeight;
_offset = Offset(
details.offset.dx, details.offset.dy - adjustment);
});
},
),
),
],
);
},
),
It’s child property, we will add LongPressDraggable() widget. In this widget, we will add feedback means the widget to show under the pointer when a drag is underway and we will add an image with height and color. Then, add child which means the widget below this widget is in the tree. Also, add onDragEnd means called when the draggable is dropped. We will add setState() method. Inside, we will add final adjustment is equal to height minus max height, and _offset is equal to Offset(details. offset. dx, details.offset.dy — adjustment).
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_longpressdraggable_dem/splash_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class LongPressDraggableDemo extends StatefulWidget {
@override
_LongPressDraggableDemoState createState() => _LongPressDraggableDemoState();
}
class _LongPressDraggableDemoState extends State<LongPressDraggableDemo> {
Offset _offset = Offset(100,250);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text('Flutter LongPressDraggable Demo '),
),
body: Center(
child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: [
Positioned(
left: _offset.dx,
top: _offset.dy,
child: LongPressDraggable(
feedback: Image.asset("assets/logo.png",height: 100,color: Colors.cyan,),
child: Image.asset("assets/logo.png",height: 100,),
onDragEnd: (details) {
setState(() {
final adjustment = MediaQuery.of(context).size.height -
constraints.maxHeight;
_offset = Offset(
details.offset.dx, details.offset.dy - adjustment);
});
},
),
),
],
);
},
),
),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the LongPressDraggable Widget in a flutter; you can modify this code according to your choice. This was a small introduction to LongPressDraggable On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the LongPressDraggable in your flutter projects. We will show you what the LongPressDraggable is?. Show a constructor and properties of the LongPressDraggable. To make a widget draggable after the user plays out a long press, you can wrap it as the child of LongPressDraggable. Thusly, you are likewise needed to characterize a widget to be displayed under the pointer during a drag. You can likewise pass a few callback works that will be considered when certain events happen. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
