Modifiers

Modifiers adjust the active drag transform before it is applied — constrain movement to an axis, snap to a grid, or clamp within a boundary. Each is a pure function, so they compose cleanly.

You'll learn

—What a modifier is.
—The built-in modifiers the engine ships.
—How to apply one or several at once.

What modifiers do

A modifier is a function from a DndModifierInput to a DndTransform. The engine runs it on every frame of a drag, so the change is live and identical on both adapters.

Built-in modifiers

They live on DndModifiers:

•restrictToHorizontalAxis — lock movement to the x axis.
•restrictToVerticalAxis — lock movement to the y axis.
•restrictToBoundary(rect) — clamp the element within a rectangle.
•snapToGrid(width: , height: ) — quantize movement to a grid.
•compose(modifiers) — apply several in order, first to last.

Applying them

Pass modifiers to the DndController on your scope:

scope.dart

DndScope(
  controller: DndController(
    modifiers: [DndModifiers.restrictToHorizontalAxis],
  ),
  child: board,
)

Combine several — snap to a grid and clamp to a box:

scope.dart

DndController(
  modifiers: [
    DndModifiers.snapToGrid(width: 16, height: 16),
    DndModifiers.restrictToBoundary(boardRect),
  ],
)

Auto-scroll Scroll a container while dragging past its edge. Collision detection Decide which target a draggable lands on.

Previous ← Sensors & activation Next Auto-scroll →