---
title: Resizing
---

# Resizing

```dart
  final Box rect = Box.fromLTWH(50, 50, 100, 100);
  final ResizeResult result = BoxTransformer.resize(
    handle: HandlePosition.bottomRight,
    initialRect: rect,
    initialLocalPosition: Vector2.zero(),
    localPosition: Vector2.zero(),
    resizeMode: ResizeMode.freeform,
    initialFlip: Flip.none,
  );

  result.rect; // the new rect
```

`BoxTransformer.resize` returns a `ResizeResult` object that contains information about the resized box.
`result.rect` is a `Box` that defines the new position of the box.

Resizing is freeform by default, meaning that the user can resize the box in any direction and in any size. You can
pass `ResizeMode.scale` to `BoxTransformer.resize` to limit the resizing to a specific direction.

See [Resize Modes](/resize_modes) for more information about different resizing modes.

## Flipping

By default, resizing allows flipping the rect horizontally and vertically. `result.rawSize` contains information about
flipping. Negative values indicate that the rect has been flipped on that axis. e.g. `result.rawSize.width` is negative
if the rect has been flipped horizontally.

### Flipping the rect while resizing
While resizing, the rect can be flipped horizontally and vertically whenever the
user drags a handle beyond the opposite side of the rect. This allows more flexibility in resizing the box. However,
this is not responsible for flipping the content of the box.

This behavior can be disabled by setting `allowBoxFlipping` to `false`.

```dart title="Disable flipping the rect while resizing"
  final Box rect = Box.fromLTWH(50, 50, 100, 100);
  final ResizeResult result = BoxTransformer.resize(
    handle: HandlePosition.bottomRight,
    initialRect: rect,
    initialLocalPosition: Vector2.zero(),
    localPosition: Vector2.zero(),
    resizeMode: ResizeMode.freeform,
    initialFlip: Flip.none,
    allowBoxFlipping: false, // disables flipping the rect while resizing
  );

  result.rect; // the new rect
```

## Constraints

Resizing can be constrained by providing any desirable combination of `minHeight`, `minWidth`, `maxHeight` and
`maxWidth` using the `constraints` property.

```dart title="Resizable widget with constrained resizing"
  final Box rect = Box.fromLTWH(50, 50, 100, 100);
  final ResizeResult result = BoxTransformer.resize(
    handle: HandlePosition.bottomRight,
    initialRect: rect,
    initialLocalPosition: Vector2.zero(),
    localPosition: Vector2.zero(),
    resizeMode: ResizeMode.freeform,
    initialFlip: Flip.none,
    constraints: Constraints(
      minWidth: 100,
      minHeight: 100,
      maxWidth: 500,
      maxHeight: 500,
    ),
  );

  result.rect; // the new rect
```
This will disallow the box from growing or shrinking beyond 100x100 and 500x500 pixels.

`ResizeResult` also provides information about whether the resizing was constrained or not.
`ResizeResult.minWidthReached`, `ResizeResult.minHeightReached`, `ResizeResult.maxWidthReached` and
`ResizeResult.maxHeightReached` are `bool` values that indicate whether the resizing was constrained or not.

[boxTransform]: https://github.com/hyper-designed/box_transform/tree/main/packages/box_transform
[flutterBoxTransform]: https://github.com/hyper-designed/box_transform/tree/main/packages/flutter_box_transform
[flutter]: https://flutter.dev