💭Привет! С вами Роза, Flutter Dev Friflex

Часто в десктоп- или веб-приложениях нужна возможность перетаскивания файлов для их загрузки в проект. Во Flutter это можно реализовать несколькими способами: написать функционал вручную или воспользоваться готовыми решениями. Сегодня я расскажу о пакете desktop_drop

desktop_drop — это пакет для drag-and-drop на вебе и десктоп-платформах. Основной виджет пакета — DropTarget, который определяет область, на которую можно перетаскивать файлы. Сам по себе виджет невидим, он просто определяет область для перетаскивания вокруг своего child. Основные свойства DropTarget включают:
✔️ onDragEntered — вызывается, когда файл входит в область виджета
✔️ onDragExited — вызывается, когда файл покидает область виджета
✔️ onDragDone — вызывается после того, как файл был отпущен внутри области
✔️ onDragUpdated — вызывается при движении файла внутри области
✔️ child — виджет, который отображается внутри области DropTarget

DropTarget(
  onDragDone: (detail) {
    for (final file in detail.files) {
      print(file.path);
    }
  },
  onDragEntered: (detail) => print('Файл в области'),
  onDragExited: (detail) => print('Файл вне области'),
  child: // some child
)

Также можно визуально показывать, что область готова принять файл. Для этого необходимо использовать состояния, отслеживаемые через onDragEntered и onDragExited.

class _FileDropAreaState extends State<FileDropArea> {
  bool _isDragging = false;

  @override
  Widget build(BuildContext context) {
    return DropTarget(
      onDragEntered: (detail) {
        setState(() => _isDragging = true);
      },
      onDragExited: (detail) {
        setState(() => _isDragging = false);
      },
      onDragDone: (detail) {
       // onDragDone logic
      },
      child: //some child
    );
  }
}

При работе с desktop_drop есть несколько нюансов, о которых стоит помнить:
▪️Разные платформы могут по-разному обрабатывать события перетаскивания
▪️С помощью DropDoneDetails можно получать пути к файлам и обрабатывать их без необходимости загружать весь файл в память
▪️Для безопасной работы всегда проверяйте тип, размер и количество файлов

❕Для полноценного функционала работы с файлами desktop_drop можно комбинировать с file_picker и другими пакетами.

❤️ — если было полезно