DragTarget In Flutter
Flutter gives different Widgets through which we can construct any sort of UI. Yet, over a design, your application ought to be interactive with the goal that it tends to be handily gotten to by clients and users.
This blog will explore DragTarget In Flutter. We perceive how to execute a demo program. We will learn how to use the drag target in your flutter applications.
Table Of Contents::
Introduction:
DragTarget is a widget that gets information when a Draggable widget is dropped. When a draggable is delayed on top of a drag target, the drag target is found out if it will acknowledge the information the draggable is conveying.
Assuming that the user drops the draggable on top of the drag target, then, at that point, the drag target is approached to acknowledge the draggable’s information.
Demo Module ::
This demo video shows how to use the drag target in a flutter and shows how a drag target will work in your flutter applications. We will show a user drag a box to the drag target then, the target box color was changed. It will be shown on your devices.
Constructor:
To utilize DragTarget, you need to call the constructor underneath:
const DragTarget({
Key? key,
required this.builder,
this.onWillAccept,
this.onAccept,
this.onAcceptWithDetails,
this.onLeave,
this.onMove,
this.hitTestBehavior = HitTestBehavior.translucent,
})
Properties:
There are some properties of DragTarget are:
- > builder: This property is called to build the items in this DragTarget. The builder can assemble various widgets relying upon what is being hauled into this drag target.
- > BuildContext: This property is used for the Context of a Widget.
- > candidateData: This property is used to contain the list of draggable data that will be accepted by DragTarget.
- > rejectedData: This property is used to contain the list of Draggable data that will not be accepted by DragTarget.
- > onWillAccept: This property is used to determine whether this widget is interested in receiving a given piece of data being dragged over this drag target. or we can say that Takes a function that provides the data of Draggable to use as a parameter and returns a bool based on whether Draggable will be accepted or not if onWillAccept returns true then onAccept is called.
- > onAccept: This property is used to take a function that provides the data of Draggable which was accepted by DragTarget.
- > onLeave: This property is used to onLeave is called when Draggable leaves the DragTarget and is not dropped into DragTarget.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called drag_box.dart inside the lib folder.
We will add the final Offset initPos, String label, and Color itemColor. The offset position is equal to the Offset. Also, we will add an initState method. In this method, we will add a position that is equal to the widget. initPos
import 'package:flutter/material.dart';
class DragBox extends StatefulWidget {
final Offset initPos;
final String label;
final Color itemColor;
const DragBox(
this.initPos,
this.label,
this.itemColor, {Key? key}
) : super(key: key);
@override
DragBoxState createState() => DragBoxState();
}
class DragBoxState extends State<DragBox> {
Offset position = const Offset(0.0, 0.0);
@override
void initState() {
super.initState();
position = widget.initPos;
}
@override
Widget build(BuildContext context) {
return Positioned(
left: position.dx,
top: position.dy,
child: Draggable(
data: widget.itemColor,
onDraggableCanceled: (velocity, offset) {
setState(() {
position = offset;
});
},
feedback: Container(
width: 120.0,
height: 120.0,
color: widget.itemColor.withOpacity(0.5),
child: Center(
child: Text(
widget.label,
style: const TextStyle(
color: Colors.white,
decoration: TextDecoration.none,
fontSize: 18.0,
),
),
),
),
child: Container(
width: 120.0,
height: 120.0,
color: widget.itemColor,
child: Center(
child: Text(
widget.label,
style: const TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
),
),
),
);
}
}
Then, we will return a Positioned widget. In this widget, we will add the Draggable method. In this method, we will add data, onDraggableCanceled, and feedback.
Create a new dart file called main.dart inside the lib folder.
In the main. dart file, we will create a new class DragTargetDemo(). In this class, we will first create a Color caughtColor was equal to the yellow color.
Color caughtColor = Colors.yellow;
In the Stack widget, we will add two DragBox with Offset, label, and color. We will add a DragTarget widget. Inside the widget, we will add onAccept, and builder. In the builder, we will add a Container with width and height.
Stack(
children: <Widget>[
const DragBox(
Offset(30.0, 0.0),
'Drag This',
Colors.orange,
),
const DragBox(
Offset(250.0, 0.0),
'Drag This',
Colors.cyan,
),
Positioned(
left: 100.0,
bottom: 100.0,
child: DragTarget(
onAccept: (Color color) {
caughtColor = color;
},
builder: (
BuildContext context,
List<dynamic> accepted,
List<dynamic> rejected,
) {
return Container(
width: 150.0,
height: 150.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(28.0),
color: accepted.isEmpty
? caughtColor
: Colors.grey.shade200,
),
child: const Center(
child: Text("You can drag here!"),
),
);
},
),
)
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File
import 'package:flutter/material.dart';
import 'package:flutter_drag_target_demo/drag_box.dart';
import 'package:flutter_drag_target_demo/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const Splash(),
debugShowCheckedModeBanner: false,
);
}
}
class DragTargetDemo extends StatefulWidget {
const DragTargetDemo({Key? key}) : super(key: key);
@override
_DragTargetDemoState createState() => _DragTargetDemoState();
}
class _DragTargetDemoState extends State<DragTargetDemo> {
Color caughtColor = Colors.yellow;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter DragTarget Demo'),
centerTitle: true,
backgroundColor: Colors.teal,
automaticallyImplyLeading: false,
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: <Widget>[
const DragBox(
Offset(30.0, 0.0),
'Drag This',
Colors.orange,
),
const DragBox(
Offset(250.0, 0.0),
'Drag This',
Colors.cyan,
),
Positioned(
left: 100.0,
bottom: 100.0,
child: DragTarget(
onAccept: (Color color) {
caughtColor = color;
},
builder: (
BuildContext context,
List<dynamic> accepted,
List<dynamic> rejected,
) {
return Container(
width: 150.0,
height: 150.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(28.0),
color: accepted.isEmpty
? caughtColor
: Colors.grey.shade200,
),
child: const Center(
child: Text("You can drag here!"),
),
);
},
),
)
],
),
),
);
}
}
Conclusion:
In the article, I have explained the Drag Target basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Drag Target User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Drag Target in your flutter projects. We will show you what the Introduction is and what are the construction and properties of the Input Chip, and make a demo program for working with Drag Target in your flutter applications. 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.
Read my other blogs :
Action Chip In Flutter
Action chip is one of the chips. Typically, it’s utilized to set off an action when the user presses the chipmedium.flutterdevs.com
Explore Types Of Constructors In Dart
Learn the types of Constructors in Dart for your appsmedium.flutterdevs.com
Filter Chip In Flutter
FilterChip is a material design widget in a flutter. Filter chips are utilized when we believe that the client should…medium.flutterdevs.com
Cupertino Timer Picker In Flutter
Cupertino timer picker in flutter is an ios style countdown timer picker. Utilizing the CupertinoTimerPicker widget we…medium.flutterdevs.com
Decorator Design Patterns For Dart & Flutter
The Decorator design is a method for expanding objects involving creation rather than inheritance, which is the…medium.flutterdevs.com
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 you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
