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

Last update: Apr 7, 2022

native_drag_n_drop

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

dragndropexample

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, and pdfs
  • 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<DropData>.

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

This is a very early release. I will take as much help as possible.

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:

GitHub

https://github.com/alexrabin/FlutterNativeDragAndDrop
Comments
  • 1. 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

    Reviewed by getBoolean at 2022-01-24 20:28
  • 2. 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).

    Reviewed by getBoolean at 2022-01-24 04:46
  • 3. 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

    Reviewed by getBoolean at 2022-01-23 10:25
  • 4. 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.

    Reviewed by getBoolean at 2022-01-23 05:12
  • 5. [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
    Reviewed by getBoolean at 2022-01-25 04:45
  • 6. 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

    Reviewed by getBoolean at 2022-01-24 04:30
Tutorials from sparrowcode.io website. You can add new, translate or fix typos. Also you can add your apps from App Store for free.

Tutorials from sparrowcode.io website. You can add new, translate or fix typos. Also you can add your apps from App Store for free.

May 22, 2022
Tutorials from sparrowcode.io website. You can add new, translate or fix typos. Also you can add your apps from App Store for free.

Страницы доступны на sparrowcode.io/en & sparrowcode.io/ru Как добавить свое приложение Добавьте элемент в json /ru/apps/apps.json. Если ваше приложен

May 22, 2022
Flutter package for detecting NSFW images and videos using native implementation

Flutter NSFW 1- Download, tflite modle and put it in assets folder 2 - Add the path of the tfliet to pubspec.yaml 3 - Read the file using path_provide

May 31, 2022
Near Procedure Call between flutter and native.

npcx A new flutter plugin project. Getting Started This project is a starting point for a Flutter plug-in package, a specialized package that includes

Jun 17, 2022
PlayCover is a project that allows you to sideload iOS apps on macOS( currently arm, Intel support will be tested.

PlayCover is a project that allows you to sideload iOS apps on macOS( currently arm, Intel support will be tested.

Jun 27, 2022
An IPFS client/api Swift Package, with the ability to add and pin any data on iOS/iPadOS/macOS

An IPFS client/api Swift Package, with the ability to add and pin any data on iOS/iPadOS/macOS. Originally bundled with GraniteUI, pulled out for independant use by any party.

Jan 26, 2022
This is a Swift Package bundling different Train APIs into one simple Swift interface.

This is a Swift Package bundling different Train APIs into one simple Swift interface.

Jun 5, 2022
Save development time! Respresso automatically transforms and delivers your digital assets into your projects
Save development time! Respresso automatically transforms and delivers your digital assets into your projects

Introduction Respresso is a centralized resource manager for shared Android, iOS and Web frontend projects. It allows you to simply import the latest

Jan 28, 2022
Save development time! Respresso automatically transforms and delivers your digital assets into your projects
Save development time! Respresso automatically transforms and delivers your digital assets into your projects

Respresso Android client Respresso is a centralized resource manager for shared Android, iOS and Web frontend projects. It allows you to simply import

May 27, 2021
Save development time! Respresso automatically transforms and delivers your digital assets into your projects
Save development time! Respresso automatically transforms and delivers your digital assets into your projects

Respresso iOS client Respresso is a centralized resource manager for shared Android, iOS and Web frontend projects. It allows you to simply import the

May 1, 2021
React Native package for interacting with HomeKit devices

React Native package for interacting with HomeKit devices

Dec 24, 2021
Mi Card App for Android & IOS in Flutter
Mi Card App for Android & IOS in Flutter

Mi Card Our Goal Now that you've seen how to create a Flutter app entirely from scratch, we're going to go further and learn more about how to design

Nov 6, 2021
Magic 8Ball App for Android & IOS in Flutter
Magic 8Ball App for Android & IOS in Flutter

Magic 8 Ball ?? Our Goal The objective of this challenge is to solidify what you've learn't in the Dicee tutorial. This app will guide you through the

Nov 6, 2021
React Native library that implements PayPal Checkout flow using purely native code (swift).
React Native library that implements PayPal Checkout flow using purely native code (swift).

react-native-paypal-swift React Native library that implements PayPal Checkout flow using purely native code (swift). Installation npm install react-n

Jul 24, 2021
Vahesaroyan-react-native-bubble-select - React native bubble picker

@vahesaroyan/react-native-bubble-select React native bubble picker Installation

Jan 30, 2022
Turn your Swift data model into a working CRUD app.
Turn your Swift data model into a working CRUD app.

Model2App is a simple library that lets you quickly generate a CRUD iOS app based on just a data model defined in Swift. (CRUD - Create Read Update De

Jun 22, 2022
Flutter & flutter_boost开发iOS混合开发项目问题记录;iOS远程依赖Flutter Module组件代码;
Flutter & flutter_boost开发iOS混合开发项目问题记录;iOS远程依赖Flutter Module组件代码;

[TOC] 这个仓库主要有2部分,整理了如何在iOS项目导入FlutterModule组件代码,以及整理开发过程中遇到的一些问题和对应的解决方案。 在iOS项目依赖FlutterModule组件代码 依赖Flutter组件代码的分为本地依赖、远程依赖2种。下面介绍的前3种是本地依赖,同时也是官方推荐

May 16, 2022
A apple search ads attribution plugin for flutter

A apple search ads attribution plugin for flutter

Oct 27, 2021
Asset Catalog Viewer allows you to browse and export renditions in an asset catalog (.car) file.

Asset Catalog Viewer With the Asset Catalog Viewer Mac app, you can browse and export various type of renditions in an asset catalog. Features Browse

Apr 3, 2022