---
title: Moving
---

# Moving/Dragging

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

```dart title="Moving a widget"
  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.

```dart title="Limiting movements"
  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.

```dart title="Disable moving"
  TransformableBox(
    rect: rect, // position
    movable: false,
    ...
  );
```