Moving/Dragging

TransformableBox allows moving/dragging/translating a widget by default.

  Stack(
    children: [
      TransformableBox(
        rect: rect, // position
        onMoved: (event) {
          setState(() => this.rect = event.rect);
        },
        contentBuilder: {...},
      ),
    ],
  );

onMoved callback is called when the user drags the box. You can use this callback to update the box by calling the setState method explicitly. You can also use TransformableBox.onChanged callback for a combined event that includes resizing in addition to moving/dragging.

Limiting movements

You can limit the allowed space the box can be moved within by setting TransformableBox.clampingBox property. clampingBox takes a Rect that defines a legal boundary that the box must stay inside.

  TransformableBox(
    rect: rect, // position
    clampingRect: Rect.fromLTWH(0, 0, 1000, 1000),
    onChanged: (event) {
      setState(() => this.rect = event.rect);
    },
    ...
  );

This will limit the space the box can be move in to be inside an area of size 1000x1000 and centered at the origin. If your Stack has a size, provide that size to clampingBox to allow movements only within the Stack boundary.

Disable movements

Setting TransformableBox.movable to false will completely disable moving/dragging behavior.

  TransformableBox(
    rect: rect, // position
    movable: false,
    ...
  );

Moving a rotated box

When TransformableBox.rotation is non-zero, the move solver computes the joint feasible translation interval that keeps the rect inside the clamp under the active bindingStrategy (rotated AABB and unrotated rect for boundingBox; just the unrotated rect for originalBox). If the requested delta would push the box past the clamp, it slides as far as the clamp allows and stops — the gesture never produces a leaky position.

See the Rotating and Binding Strategies pages for the full picture.