flutter_native_drag_n_drop
A flutter plugin to support the native drag and drop, especially to drag files (only files) out of the application boundary.
To-do’s (future versions)
- Better drag image handling (remove native implementation, drag image should be set on dart side)
- Windows implementation
Usage
-
To use this plugin, add
flutter_native_drag_n_dropas a dependency in your pubspec.yaml file. -
Use the
NativeDraggablewidget and passNativeDragItemobjects for drag & drop within the application andNativeDragFileItemobjects for support drag & drop across applications. Passing a mix of both are not allowed. When you drop the objects within the application, you have to use thedataobject from the items. Otherwise you pass anfileStreamCallbackfunction and return a stream which will writes the binary data outside of the application into a file.
NativeDragItem vs. NativeDragFileItem
NativeDragItem is used for when you just drag and drop within the application (e.g folder, image).
NativeDragItem<T extends Object>(
required String name,
T? data
)
NativeDragFileItem is used for files, especially when you want to support the drag and drop outside of the application (e.g file to Finder or Mail client).
NativeDragFileItem<T extends Object> extends NativeDragItem(
required String fileName,
required int fileSize
)
- Use the
NativeDropTargetto receive drop events within the application.
NativeDropTarget(
builder: (context, candidateData, rejectedData) {
return Container();
},
onDragEntered: (details) {
// callback when drag has entered the drop area
},
onDragExited: (details) {
// callback when drag has exited the drop area
},
onDragUpdated: (details) {
// callback when drag has moved within the drop area
},
onDragDone: (details) {
// callback when drag has dropped
},
onWillAccept: (details) {
// returns a boolean if drag item should be accepted
}
)
Example
We want to support drag and drop of image files within the application and outside of the application. For this we create a NativeDraggable widget with NativeDragFileItem objects.
NativeDraggable(
child: Container(),
fileItems: [
NativeDragFileItem(
fileName: "image.jpg",
fileSize: image.size,
data: AssetImage("image.jpg"))
],
fileStreamCallback: passFileContent,
)
We passed the passFileContent function as a fileStream callback. Inside this function we write the bytes to a stream and update the progress indicator.
To receive the files within the application, we create a NativeDropTarget object and read the image from the data variable.
NativeDropTarget(
builder: (context, candidateData, rejectedData) {
return Container();
},
onDragDone: (details) {
final image = details.items.first.data! as AssetImage;
},
onWillAccept: (details) {
return true;
}
)
