flutter_dropzone 1.0.7

  • Readme
  • Changelog
  • Example
  • Installing
  • 78

Dropzone #

A Flutter Web plugin to handle drag-and-drop (files) into Flutter. If you're interested in drag-and-drop inside a Flutter app, check out other packages like dnd.

It exposes a single platform view, DropzoneView:

  operation: DragOperation.copy,
  onCreated: (ctrl) => controller = ctrl,
  onLoaded: () => print('Zone loaded'),
  onError: (ev) => print('Error: $ev'),
  onHover: () => print('Zone hovered'),
  onDrop: (ev) => print('Drop: $ev'),
  onLeave: () => print('Zone left'),

The view itself has no display, it's just the dropzone area. Use a Stack to put it into the background of other widgets that provide your UI:

  children: [
    Center(child: Text('Drop files here')),

Using it in cross-platform apps #

It's a federated plugin, meaning that it will compile in cross platform apps that contain both Android/iOS and Web code. It will not function on the latter, the view will simply return an error text instead of a drop zone. Use if (kIsWeb) from import 'package:flutter/foundation.dart' to only use it in Flutter Web. Still, the same app will still compile to Android and iOS, without the usual dart:html errors (this is what federated plugins are for).

Using the controller #

There is a convenience function, pickFiles() on the controller returned by the view. It simply opens the usual File Open dialog in the browser and lets the user pick some files. It has nothing to do with the drag-and-drop operation (although it is the other possible way to select files) but by putting it into the web side of a federated plugin we can make sure it doesn't hurt the compilation on other platforms.

Because the files returned are HTML File API references with serious limitations, they can't be converted to regular Dart File objects. They are returned as dynamic objects and the controller has functions to extract information from these objects:

  • Future<String> getFilename(dynamic htmlFile);
  • Future<int> getFileSize(dynamic htmlFile);
  • Future<String> getFileMIME(dynamic htmlFile);
  • Future<Uint8List> getFileData(dynamic htmlFile);

You can't have a permanent link to the file. If you need to retain the full image data, use getFileData() to get the actual contents and store it yourself into localStorage, IndexedDB, uploading to your server, whatever. You can get a temporary URL using:

  • Future<String> createFileUrl(dynamic htmlFile);
  • Future<bool> releaseFileUrl(String fileUrl);

but this will only be valid for the session. It's a regular URL, so you can use it to display the image the same way like loading from a regular web URL. Release it when you're done with the image.

[1.0.7] - 2020-06-18 #

  • Support for onLeave #2.

[1.0.6] - 2020-06-18 #

  • Support for onHover #2.

[1.0.5] - 2020-06-17 #

  • CanvasKit support.

[1.0.4] - 2020-05-31 #

  • Improve README.

[1.0.3] - 2020-05-29 #

  • Two dropzones in example.

[1.0.2] - 2020-05-29 #

  • First functional release.

[1.0.0] - 2020-05-29 #

  • Initial release.


import 'package:flutter/material.dart';
import 'package:flutter_dropzone/flutter_dropzone.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> {
  DropzoneViewController controller1;
  DropzoneViewController controller2;
  String message1 = 'Drop something here';
  String message2 = 'Drop something here';
  bool highlighted1 = false;

  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Dropzone example'),
          body: Column(
            children: [
                child: Container(
                  color: highlighted1 ? Colors.red : Colors.transparent,
                  child: Stack(
                    children: [
                      Center(child: Text(message1)),
                child: Stack(
                  children: [
                    Center(child: Text(message2)),

  Widget buildZone1(BuildContext context) => Builder(
        builder: (context) => DropzoneView(
          operation: DragOperation.copy,
          onCreated: (ctrl) => controller1 = ctrl,
          onLoaded: () => print('Zone 1 loaded'),
          onError: (ev) => print('Zone 1 error: $ev'),
          onHover: () {
            setState(() => highlighted1 = true);
            print('Zone 1 hovered');
          onLeave: () {
            setState(() => highlighted1 = false);
            print('Zone 1 left');
          onDrop: (ev) {
            print('Zone 1 drop: ${ev.name}');
            setState(() {
              message1 = '${ev.name} dropped';
              highlighted1 = false;

  Widget buildZone2(BuildContext context) => Builder(
    builder: (context) => DropzoneView(
      operation: DragOperation.move,
      onCreated: (ctrl) => controller2 = ctrl,
      onLoaded: () => print('Zone 2 loaded'),
      onError: (ev) => print('Zone 2 error: $ev'),
      onHover: () => print('Zone 2 hovered'),
      onLeave: () => print('Zone 2 left'),
      onDrop: (ev) {
        print('Zone 2 drop: ${ev.name}');
        setState(() {
          message2 = '${ev.name} dropped';

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  flutter_dropzone: ^1.0.7

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_dropzone/flutter_dropzone.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform Android


  • package:flutter_dropzone/flutter_dropzone.dart that declares support for platforms: Web

Package does not support Flutter platform Linux


  • package:flutter_dropzone/flutter_dropzone.dart that declares support for platforms: Web

Package does not support Flutter platform Windows


  • package:flutter_dropzone/flutter_dropzone.dart that declares support for platforms: Web

Package does not support Flutter platform iOS


  • package:flutter_dropzone/flutter_dropzone.dart that declares support for platforms: Web

Package does not support Flutter platform macOS


  • package:flutter_dropzone/flutter_dropzone.dart that declares support for platforms: Web

Package not compatible with SDK dart


  • flutter_dropzone that is a package requiring null.

Health suggestions

Format lib/flutter_dropzone.dart.

Run flutter format to format lib/flutter_dropzone.dart.

Format lib/src/dropzone_view.dart.

Run flutter format to format lib/src/dropzone_view.dart.

Maintenance suggestions

The package description is too short. (-18 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
flutter_dropzone_platform_interface ^1.0.1 1.0.2
flutter_dropzone_web ^1.0.3 1.0.5
Transitive dependencies
collection 1.14.12 1.14.13
flutter_web_plugins 0.0.0
js 0.6.2
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
pedantic ^1.9.0
plugin_platform_interface ^1.0.0 1.0.2