Support drag and drop across Flutter boundary

[stuartmorgan]

For instance, it should be possible to have a Flutter widget that accepts image data, and to drag and drop an image from another application onto that widget.

This depends on #23603, but also requires some notion of a widget being able to declare itself as a drag target and/or source.

It's not entirely clear how much of this will need to be on the native side vs. the Dart side. I suspect dropping into the app will be easier to support than dragging out, but both will require careful thought about how to straddle the native/Dart divide (e.g., how to track rectangles for drag targets).

[rodydavis]

This should be extended to iPads as well. This doesn't exist on the iPhone but it does for iPad.

If drag and drop is supported for the iPad then the Mac version will get it too: https://developer.apple.com/documentation/uikit/creating_a_mac_version_of_your_ipad_app/optimizing_your_ipad_app_for_mac

Unless it is pure AppKit then it would have to be done separately I believe.

[stuartmorgan]

If drag and drop is supported for the iPad then the Mac version will get it too

Again, the macOS Flutter embedding does not use Catalyst.

[rodydavis]

Correct. That’s why I included the last part.

As of right now it does not use catalyst but it could change in the future.

[ferdigokdemir]

+1

[Ahmadre]

Oh yes please! We need that! For browser apps it would be also very useful! @yjbanov are there any plans?

[Ahmadre]

Little example where we need that in a costumer project:

Copyright: Nancy Nguyen (dribbble.com: https://dribbble.com/shots/3286194-Daily-UI-031-File-Upload)

[sh0umik]

We also need this support in flutter web. Shouldn't we add platform-web in the label ?

[yasinarik]

We also need this support in flutter web. Shouldn't we add platform-web in the label ?

Do we have it already? As far as I know, we don't at the moment. I will build an e-commerce administration app (kind of an ERP and a CMS) where users can drag and drop folders and images into a box. Then, they will upload them from our custom server.

Also, pick files and choose folder must be added. I will continue building for desktop and web but priority will be on whichever has it first.

[mosheduminer]

It is already possible to implement drag and drop in flutter web. I created a gist here of a simple implementation. Inspired by the fancier implementation here.

[sh0umik]

@mosheduminer i tried your snippet on web but its not working ... Can you share any gif of yours working ? The whole thing depend on document.body.onDrop event but the listener shows nothing for my case.

I am using latest flutter dev channel

[mosheduminer]

@sh0umik, I made a gif, though it doesn't show much other than the console logging a file. I just pasted the code into a file, and used the DropZone component in the home page. So, I'm afraid I have no idea why it's not working for you.

(I am using beta channel, though I don't think it should make a difference).

[technolion]

+1

[yjbanov]

This sounds like a request for a plugin. I imagine each platform will have its own bespoke drag'n'drop API. For example, on the Web you can drag'n'drop files using this: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

[rodydavis]

I also have a need for this and can able develop the plugin for macOS.

[stuartmorgan]

This sounds like a request for a plugin.

I would need some convincing that this should be a plugin rather than built into the embeddings. Drag and drop is a core interaction model on desktop, and something I would expect to be part of the framework.

Also, I doubt there's a non-hacky way to do a good job of this with a plugin, at least on macOS, given the interaction necessary between native code and Flutter to handle widget location updates for anything beyond the overly-simplistic case of the entire Flutter view being a drag source and/or target.

[sh0umik]

@mosheduminer yea got it working after static build of flutter web project or if i run without debug it works. Anyway it was a good hack but i would like to see it as a complete part of the engine.

[emme1444]

@stuartmorgan, where is the mobile/tablet version of this issue? Since the lack of this functionality there, is also present.

Splitscreen on modern versions of Android as well as in iPadOS enables the need for this funcitonality on these platforms too. This ties together with @rodydavis comment earlier, in which he explains that this support should be carried to the iPad as well.

Maybe a good idea would be to remove the "on desktop platforms" part of the title, and add the platform-android and platform-ios labels to the issue? If not so, explain why and point me in a different/better direction.

[yasinarik]

@kenzieschmoll @stuartmorgan @mosheduminer

document.body.onDrop.listen(onDrop);

The Drag and Drop implementation works; however, I couldn't find a way to select (or find) a widget from the rendered HTML.

The above code selects the whole body of the document, aka WebApp. So onDragOver fires when a file is dragged anywhere on the app. So you can drop it anywhere on the app too. It just accepts.

There must be some Widget that enables adding a property such as id="drop-zone".

So document.getElementById("drop-zone") will successfully define the child widget as the related drop zone area.

return SomeHtmlWidget(
  properties: {"id": "drop-zone"},
  child: Container(
    ...
    ...
  ),
);

[alexrabin]

I just created my first package that allows native drag and drop support for iOS! (Hopefully android in the future)
Anyways it's called native_drag_n_drop. I hope it helps some of you guys

[alexrabin]

I just created my first package that allows native drag and drop support for iOS! (Hopefully android in the future)

Anyways it's called native_drag_n_drop. I hope it helps some of you guys

Thanks to @getBoolean's help there is now Android support!

[technolion]

We created a plugin for native drag & drop support including drag-out to a folder or another application:
https://pub.dev/packages/flutter_native_drag_n_drop
Currently only macOS is supported. We are seeking support for Windows.

[yuanhoujun]

We created a plugin for native drag & drop support including drag-out to a folder or another application: https://pub.dev/packages/flutter_native_drag_n_drop Currently only macOS is supported. We are seeking support for Windows.

Wow, wonderful!!!

[BananaMasterz]

if you do windows please think about adding OLE support. (for the ability to drop files from apps like outlook) the following package works but only if the file exists in a path already. If you drag an email from outlook, for example, you would first have to drag it to the desktop or some other directory, and then to flutter. I can't find the developer's contact so I just leave it here in case it helps.

https://pub.dev/packages/desktop_drop

[esenmx]

@faisalansari0367 this is unrelated to the issue.

[faisalansari0367]

@darshankawar

@faisalansari0367 this is unrelated to the issue.

Please open this issue or guide me or help me to connect with someone who can help me giving me some suggestions to achieve this feature

[knopp]

Anyone needed drag & drop in flutter might want to take a look at the super_drag_and_drop plugin. As far as I can tell it's the most comprehensive cross-platform drag and drop implementation out there.

Apart from other things it supports virtual files (so for example on windows it should be able to read the dragged IStream from Outlook directly - exposing it as flutter Stream - @BananaMasterz)

It also supports providing virtual files (on platforms where it is supported). So you can generate file content on demand.

[longtimedeveloper]

@knopp

Thank you very much. Greatly appreciate your outstanding information!!

[BananaMasterz]

Anyone needed drag & drop in flutter might want to take a look at the super_drag_and_drop plugin. As far as I can tell it's the most comprehensive cross-platform drag and drop implementation out there.

Apart from other things it supports virtual files (so for example on windows it should be able to read the dragged IStream from Outlook directly - exposing it as flutter Stream - @BananaMasterz)

It also supports providing virtual files (on platforms where it is supported). So you can generate file content on demand.

THANK YOU for tagging me... I've been struggling with this for quite a while and didn't realize this plugin is now available. Love you

[gspencergoog]

We're happy to announce that the Flutter team has chosen to officially recommend super_drag_and_drop as the solution for implementing external drag and drop in Flutter applications! We find it to be a full-featured and mature package with a well designed API.

The implementation of super_drag_and_drop uses Rust, but after speaking with Matej about our concerns around adding a new toolchain dependency for users of the package, he has converted the package to use precompiled binaries by default (although you can still build it from source yourself with Rust), so no direct dependency on the Rust toolchain is needed to use the package.

This is a clear example of the power of open source for projects such as Flutter, and frees the rest of the team to implement other priorities instead of spending engineer years replicating what @knopp (and his sponsor Superlist) have already built. Thanks Matej!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.