Hola, Amigos!

На связи Михаил Чернецов, Flutter Dev агентства продуктовой разработки Amiga. Сегодня мы поговорим про Draggable, который позволяет перетаскивать виджет по всему пространству экрана.

При передвижении объекта под курсором отображается виджет, передаваемый в свойство feedback. Если необходимо изменить сам виджет, можно передать свойство в childWhenDragging.

Draggable(
  data: …, // Данные
  feedback: Container(), // Виджет который перетаскивается
  childWhenDragging: Container(), // Виджет который заменяет child, когда виджет перетаскивают, необязательный.
  child: Container(), // Сам виджет
),

Однако само перетаскивание виджета ничего не делает. Необходимо также предоставить ему место, куда его можно передвинуть. Этим занимается виджет DragTarget.

Необходимо предоставить ему билдер и опциональные callback onWillAcceptWithDetails, отвечающий за приём Draggable widget и отработку onAcceptWithDetails.

onMove и onLeave — интересные callback, т.к. реагируют не на то, что Draggable был туда передан, а на появление в этой области Draggable.

DragTarget(
  builder: (BuildContext context, List<dynamic> _, List<dynamic> _,) {
    return Container();
  },
  onAcceptWithDetails: (DragTargetDetails details) {
    …
  },
),

Однажды это нами было использовано, т.к. при драге виджета мы не можем использовать другие жесты, в том числе скролл. На верхней и нижней границе экрана были расположены два невидимых драг таргета, которые начинали движение ScrollController при срабатывании onMove и останавливали движение контроллера при срабатывании onLeave.

Из интересных применений Draggable является также оборачивание виджета в DragTarget. Его нельзя будет перетаскивать, но он будет реагировать на перетаскивание Draggable. Например, когда нужно сделать что-то наподобие ReorderableList, когда можно взять необходимый элемент, а остальные элементы обернуть в DragTarget.

Также существует виджет LongPressDraggable, который перетаскивается только при срабатывание на длительное нажатие и при этом триггерит hapticFeedback (вибрацию).

Всем хорошего кода! Делитесь в чате своим опытом работы с Draggable.