A package that allows you to add native drag and drop support into your flutter app.

Overview

native_drag_n_drop

native_drag_n_drop Donate Buy me a coffee GitHub issues GitHub Repo stars

A package that allows you to add native drag and drop support into your flutter app. iPadDropExample

dragndropex2

Currently supported features

  • Support iPadOS 11 and iOS 15 and above
  • Only has drop support (can drag data from outside of the app and drop into your flutter application)
  • Supports text, urls, images, videos, audio, pdfs, and custom file extensions
  • Can drop multiple items at once

Usage

import 'package:native_drag_n_drop/native_drag_n_drop.dart';

List<DropData> receivedData = [];

@override
Widget build(BuildContext context) {
    return NativeDropView(
    allowedTotal: 5,
    child: receivedData.isNotEmpty
        ? ListView.builder(
            itemCount: receivedData.length,
            itemBuilder: (context, index) {
                var data = receivedData[index];
                if (data.type == DropDataType.text) {
                    return ListTile(
                    title: Text(data.dropText!),
                    );
                }

                return ListTile(
                    title: Text(data.dropFile!.path),
                );
            })
        : const Center(
            child: Text("Drop data here"),
        ),
    loading: (loading) {
        // display loading indicator / hide loading indicator
    },
    dataReceived: (data) {
        setState(() {
            receivedData.addAll(data);
        });
    });
}

The dataReceivedCallback returns List .

enum DropDataType { text, url, image, video, audio, pdf }

class DropData {
  File? dropFile;
  String? dropText;
  Map<String, dynamic>? metadata;
  DropDataType type;
  DropData({this.dropFile, this.dropText, this.metadata, required this.type});
}

It is safe to assume that if the dataType is text or url then the dropText will be non null.

As for image, video, audio, pdf it is safe to assume the dropFile will be non null

Todo

  • specify the number of items allowed to be dropped at a time
  • Only allow certain data types
  • Android Support
  • Drag support (Dragging data within app to a source outside of flutter app)

Contributing

Please make a pr and show an example if possible.

These are some resources that may help you when it comes to adding drag and drop support:
Comments
  • Fix Dropping Bugs

    Fix Dropping Bugs

    Closes #4

    Added a boolean flag to allow non-allowed items to be dropped if at least one item in the dropping session was allowed Fixed a potential bug where files such as PDF would be categorized as DropDataType.pdf even if only DropDataType.file was allowed Fixed a bug where documents (.numbers) dropped from iCloud would not be accepted Refactor code to be more readable

    opened by getBoolean 34
  • Able To Drop Non Allowed Items

    Able To Drop Non Allowed Items

    Problem: It is possible to drop items that have not been allowed as long as one item in the drop session is allowed

    image

    Proposed solution: In the handle drop method, check the item if it conforms to an allowed type identifier or file extension. Code from the can drop method should be pulled into private functions so it can be reused (if possible).

    bug 
    opened by getBoolean 7
  • Some file types (apk) can't be dropped from Files' iCloud

    Some file types (apk) can't be dropped from Files' iCloud

    I've run into the issue while testing that some filetypes can't be dropped from iCloud in the Files app, specifically apk. It works fine using Dropbox. This may not be limited to just apk files, I suspect its something related to iOS' Uniform Type Identifier system.

    I'm not entirely sure of the reason, but theres two issues I've found related to iCloud. If DropDataType.file is enabled, apks cannot be dropped from iCloud unless "apk" is added to allowed file extensions. A second issue is that even when "apk" is added to the file extensions and it looks like it should accept, it does not load the file if dragged from iCloud.

    In the first gif, you can see that the apk cannot be uploaded if it is on the iCloud drive, while it can if it is stored locally.

    image

    This second gif shows that other files work fine through iCloud

    image

    bug help wanted 
    opened by getBoolean 5
  • Set Allowed DropDataTypes and File Extensions

    Set Allowed DropDataTypes and File Extensions

    Add DropDataType.file to allow dropping any file Support restricting what types of DropDataType and file extensions can be dropped

    NativeDropView(
      allowedDropDataTypes: const <DropDataType>[
        DropDataType.image,
      ],
      allowedDropFileExtensions: const <String>[
        'epub',
        'apk',
      ],
      ...
    

    Dropping is allowed when the dropping session contains an item that conforms to one of the allowedDropDataTypes OR when the file extension is included in allowedDropFileExtensions

    I see that you've made some commits since I started working which has caused some conflicts. Let me know if you need me to resolve them.

    enhancement 
    opened by getBoolean 5
  • [Feature] Android Support

    [Feature] Android Support

    This issue will track android support's overall development. Individual features may get split into its own issue. Research on APIs and their implementation should also be posted here.

    API

    Android 7+

    Android Drag and Drop API: https://developer.android.com/guide/topics/ui/drag-drop#DragPermissionsMultiWindow Multi-Window guide: https://developer.android.com/guide/topics/large-screens/multi-window-support Multi-Window/Multi-Instance: https://developer.samsung.com/galaxy-z/multi-window.html DropHelper (min API level 24), simplified drag and drop: https://developer.android.com/guide/topics/ui/drag-drop#drophelper_for_simplified_drag_and_drop

    Galaxy Fold, Z Fold2, or Z Fold3: https://developer.samsung.com/codelab/galaxy-z/multi-window-drag-drop.html Emulator: https://developer.samsung.com/galaxy-z/testing.html

    Surface Duo: https://docs.microsoft.com/en-us/dual-screen/android/sample-code/drag-drop?tabs=java Emulator: https://docs.microsoft.com/en-us/dual-screen/android/emulator/surface-duo-download Java SDK Examples: https://github.com/microsoft/surface-duo-sdk-samples App Examples: https://github.com/microsoft/surface-duo-app-samples

    Permissions

    The following permissions are required for drag and drop in different scenarios: (info from here)

    For public files, to use the media library MediaProvier, permissions for reading and writing external storage are required.

    The FileProvider is used to share private app data. Use the per-URI permission mechanism for authorization. The source app can set Intent.FLAG_GRANT_READ_URI_PERMISSION or Intent.FLAG_GRANT_WRITE_URI_PERMISSION to grant the read or write permission to the Intent data or the URI specified in ClipData.

    Features

    • [x] NativeDropView (Drop Items Into App)
    • [ ] NativeDragView (Drag Items Outside App)
    • [x] Allowed Data Types
    • [x] Allowed File Extensions
    • [x] Item Types
      • [x] text
      • [x] urls (Patterns.WEB_URL.matcher(url).matches())
      • [x] images
      • [x] videos
      • [x] audio
      • [x] pdfs
      • [x] files
    • [x] Change parameters during runtime

    Other possible features

    • [ ] Callback to update UI according to result of drag events. This is all conceptual, implementation has not been decided yet but the idea is that the UI should be able to react to drag events.
      • [ ] ACTION_DRAG_STARTED: Drag started. Includes can/cannot accept, x/y location, and description of drag contents.
      • [ ] ACTION_DRAG_ENTERED: Drag entered NativeDropView's bounds. Includes can/cannot accept, and description of drag contents.
      • [ ] ACTION_DRAG_LOCATION: Drag is in NativeDropView's bounds and not in a child view that can accept. Includes x/y location.
      • [ ] ACTION_DRAG_EXITED: Drag moved out of NativeDropView's bounds or into a child view that can accept. Includes description of drag contents.
      • [ ] ACTION_DROP: Dragged contents dropped on NativeDropView and can accept and not in a child view that can accept the drop. Includes x/y location, and description of drag contents.
      • [ ] ACTION_DRAG_ENDED: Drag and drop session concluded. Includes if data was received and the x/y location of the drop in the view.
    • [ ] DraggableText (Tap and hold to drag entire text)
    • [ ] DraggableSelectableText (Tap and hold to select text, then tap and hold on selected text to drag)
    • [ ] DraggableImage
    enhancement 
    opened by getBoolean 2
  • Fix Some Files Can't Be Dropped

    Fix Some Files Can't Be Dropped

    This fixes a bug where some files, specifically apk, could not be dropped even when DropDataType.file was allowed. A workaround was to add that file's file extension, but now that is no longer needed.

    This issue was discussed in #2

    bug 
    opened by getBoolean 1
Releases(v0.0.4)
  • v0.0.4(Feb 2, 2022)

  • v0.0.3+4(Jan 26, 2022)

    Fixed Issues #7 & #8 Images/videos are being sent correctly from safari and messages Text is sent as a string instead of a text file when DropDataType == .file

    Source code(tar.gz)
    Source code(zip)
  • v0.0.3+3(Jan 25, 2022)

  • v0.0.3+2(Jan 25, 2022)

    • Programmers can add the ability to allow certain data types or custom file extensions.
    • There is an option to allow other data types as long as one of the dragged items is allowed (thank you @getBoolean).
    • Can add a limit of how many items can be dropped at once. There is no limit by default.
    • Only has iPadOS 11 and iOS 15 and above support
    Source code(tar.gz)
    Source code(zip)
Owner
Alex Rabin
Alex Rabin
🛒 A simple Shop App to browse, add your own products, add products to cart and later order them.

?? A simple Shop App to browse, add your own products, add products to cart and later order them.

Hemant Rajput 2 Jun 8, 2022
Package your Flutter app into OS-specific bundles (.app, .exe, etc.) via Dart or the command line.

flutter_app_packager Package your Flutter app into OS-specific bundles (.app, .exe, etc.) via Dart or the command line. The flutter_app_packager sourc

LeanFlutter 415 Jan 8, 2023
An app that keeps track of what you're watching and allows you to watch the shows from within the app itself. It uses Kitsu API as it's data source.

Anilemon A small app to keep track of and watch your favorite anime. Features Save anime that you are interested in in your library Open the website y

Pumpkin Person 0 Oct 12, 2021
Spyxpo Web to App Builder - a tool which is used to convert a website into an app for iOS, Android, Windows, macOS and Linux.

Spyxpo Web to App Builder Convert any website into an iOS/Android app. This is a preview build for testing purposes major update coming soon. Supporte

Spyxpo 4 Aug 24, 2022
mezza 0 Nov 24, 2021
A re-modding of the Flutter 2.5 Skeleton App Template into something that really equally shows flutter best practices in DevOPS, OOP, and UX.

A re-modding of the Flutter 2.5 Skeleton App Template into something that really equally shows flutter best practices in DevOPS, OOP, and UX.

Fred Grott 20 Dec 22, 2022
2 screens you maybe find useful wan you plan to build your flutter app

2 screens to a travel application 2 screens you maybe find useful wan you plan t

Abdelghani meliani 5 Nov 14, 2022
Learn how to incorporate Firebase into our Flutter apps

Flash Chat ⚡️ Our Goal The objective of this tutorial is to learn how to incorporate Firebase into our Flutter apps. We'll be using Firebase Cloud Fir

null 0 Oct 27, 2021
A flutter app where the user could add their credit cards and see a summary of their expenses

Card Controller ?? Card Controller foi um projeto realizado com o intuito de aprendizagem e prática da linguagem de programação Dart em conjunto com o

null 3 Jul 26, 2022
Phone-Store-App-UI-Flutter - Flutter Phone E-Store App UI with support for dark and light mode

Phone-Store-App-UI-Flutter - Flutter Phone E-Store App UI with support for dark and light mode

Jakub Sobański 2 Apr 30, 2022
Native Flutter application for Nekoya

?? Nekoya App Features [✓] Home [✓] Login [✓] Register [✓] 2FA OTP [✓] Forgot Password [✓] Active Sessions [✓] Products [✓] Product [✓] Search [✓] Car

Nekoya 5 Jun 30, 2022
Native applications that are built with a specific programming language for a particular platform

JAWABAN UAS 1.Aplikasi native adalah aplikasi yang dibangun dengan bahasa pemrograman yang spesifik untuk platform tertentu. Contoh populernya yakni p

null 0 Oct 16, 2021
Scan Qr Code Which Will Automatically Add That User To The Visitor List

GIGO APP Gigo app is a mobile application where shopkeepers have an app that shows QR code and users can scan this QR code which will automatically ad

JASIRA T P 4 Dec 30, 2022
Movie Database app is a Flutter app project that allows users to search for a movie or tv series, see the detail, season & episode, and save watchlist.

Flutter Movie Database Movie Database app is a Flutter app project that allows users to search for a movie or tv series, see the detail, season & epis

Timeless Existence 14 Dec 24, 2022
Flutter Crypto App UI with support for dark and light mode

Beautiful Hotel Booking App UI with support for dark and light mode. Created by Martin Gogolowicz ( Martin Gogołowicz ).

Martin Gogołowicz 23 Dec 24, 2022
Currency Converter App with support for dark and light mode

Currency Converter App with support for dark and light mode. Created by Martin Gogolowicz ( Martin Gogołowicz ) | SobGOG

Martin Gogołowicz 10 Oct 31, 2022
Real short video app with firebase and pixels API.Where you can create a short video with pixels' stock videos and also merge your audio.

Real short video app with firebase and pixels API.Where you can create a short video with pixels' stock videos and also merge your audio.

Ansh rathod 55 Dec 26, 2022
This is an E-commerce App that you can buy goods, it has no data base so all you see in this app are created as default

This is an E-commerce App that you can buy goods, it has no data base so all you see in this app are created as default. Once I create a server and connect with it, I will create another repository or simply update this one.

Khusan Flutter Dev 2 Feb 10, 2022
A flutter app that allows users to search books and display their details

Project find books This repository is the first part of the main project which aims to search books and find libraries containing them. I've decided t

Abdel 3 Jul 11, 2022