A simple way to bring drag’n’drop to flutter web

drop_zone

a simple way to bring drag’n’drop to flutter web.

drop_zone is commonly used for file choosing by dragging and dropping a file(s) onto a designated widget. the user can then use the dropped html file(s).

example

an example can be found in the example directory of this repository.

how to use

add drop_zone to pubspec.yaml of your project:

dependencies:
  drop_zone: ^1.0.2

add necessary imports and wrap any widget with dropzone() to use it as a dropzone:

import 'package:drop_zone/drop_zone.dart';
import 'dart:html' as html;

dropzone(
    ondragenter: () {
        print('drag enter');
    },
    ondragexit: () {
        print('drag exit');
    },
    ondrop: (list<html.file> files) {
        print('files dropped');
        print(files);
    },
    child: container(
        width: 300,
        height: 300,
    )
)