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,
    ...
  );