Dragging files is a relatively common function, such as chat, open files. Now we can use a third-party plugin to drag files from a computer disk to our application and read them in Flutter. Here is a simple demonstration of the function of reading pictures.

desktop_drop

Install 🛠

Click desktop_drop to get the latest version. The following is the latest version at the time of writing:

desktop_drop: ^ 0.3.3
Copy the code

Know DropTarget 🧩

Desktop_drop can read and drag multiple files at once, culminating in a list stored as an XFile object. To use XFile objects directly, you’ll also need to install cross_file, a third-party plugin, which you can get here. Of course, we don’t have to use this plug-in, because all we really need is the path to the file. You can obtain the value in the following ways:

final List<File> files = [];
// Instead of getting the list, use the XFiles demo
XFiles.map((e) => files.add(File(e.path)));
Copy the code

But I already have Corss_file installed, so I’ll use that plug-in for the rest of the content.

The DropTarget component is used for dragging and reading files. Let’s take a look at what properties it has:

  • Key? key: Unique identifier of a component
  • required Widget child: child components
  • void Function(DropEventDetails)? onDragEntered: Drag to enter
  • void Function(DropEventDetails)? onDragExited: When dragging away
  • void Function(DropDoneDetails)? onDragDone: After the drag is complete
  • void Function(DropEventDetails)? onDragUpdated: Drag to move a position
  • bool enable = true: Enable or not

Now that we know the properties of DropTarget, let’s use it.

Using 🍖

Our requirement is to drag an image into the application and display it. So, we have two different screens to display.

Let’s start with the interface that lets users drag images into the app:

Widget uploadImage() {
  return Center(
    child: Container(
      width: 400,
      height: 200,
      decoration: DottedDecoration(
        color: Colors.blue,
        shape: Shape.box,
        borderRadius: const BorderRadius.all(Radius.circular(24)),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          Icon(Icons.image, size: 60, color: Colors.blue),
          SizedBox(height: 8),
          Text(
            'Drag image to open',
            style: TextStyle(fontSize: 24, color: Colors.blue),
          ),
        ],
      ),
    ),
  );
}
Copy the code

Now you also need a page to display your images. To display the image, pass in a file object:

Widget viewImage(XFile file) {
  return Padding(
    padding: const EdgeInsets.all(12.0),
    child: Center(
      child: DecoratedBox(
        decoration: const BoxDecoration(
          boxShadow: [
            BoxShadow(blurRadius: 8, color: Colors.black26),
          ],
        ),
        child: Image.file(
          File(file.path),
        ),
      ),
    ),
  );
}
Copy the code

Ok, now all you need to do is write a method for the user to drag the file.

We first need to define an object to store the path of the image (😁 is a little lazy here, based on the above code, we only show one image).

Define an XFile object:

XFile? files;
Copy the code

Define a drag completion method:

void _dragDone(DropDoneDetails detail) {
  setState(() {
    file = detail.files.last;   // A new file is displayed each time the file is dragged in
  });
}
Copy the code

Use the following:

@override
Widget build(BuildContext context) {
  return DropTarget(
    onDragDone: _dragDone,
    child: file == null ? uploadImage() : ViewImage(file!),
  );
Copy the code

😀 success.

However, there seems to be a slight deformity. There is a lot of noise in the image and it is not clear 🤔 (after many tests, this should be a bug of Flutter and an issue has been submitted to Flutter).

🛫OK, that’s the end of this article, which is for the current version of the plug-in and is not guaranteed to be applicable to future iterations of plug-in usage.

Finally, thanks to MixinNetwork members for the development and maintenance of the above plug-ins 😁.