---
title: Getting Started
---

# Getting Started

## Installation

Add this package to your dependencies in your `pubspec.yaml` file:

```dart
  dependencies:
    box_transform: <latest_version>
```

## Models

[Box Transform][boxTransform] defines several models to mimic that of Flutter's.

- The equivalent of `Size` is `Dimension`.
- The equivalent of `Offset` is `Vector2` from the `vector_math` package.
- The equivalent of `Rect` is `Box`.
- The equivalent of `BoxConstraints` is `Constraints`.

## Usage

You can call the `BoxTransformer.resize` method to resize a box. The method takes the following parameters:

`handle`: The handle that is being dragged.
`initialRect`: The box before resizing started.
`initialLocalPosition`: The position of the mouse pointer before resizing started.
`localPosition`: The current position of the mouse pointer.
`resizeMode`: The resize mode. See [Resize Modes](/resize_modes) for more information.
`initialFlip`: The flip state before resizing started.

```dart title="Resizing a Box"
  final Box rect = Box.fromLTWH(50, 50, 100, 100);

  final ResizeResult result = BoxTransformer.resize(
    handle: HandlePosition.bottomRight, // handle that is being dragged
    initialRect: rect,
    initialLocalPosition: Vector2.zero(),
    localPosition: Vector2.zero(),
    resizeMode: ResizeMode.freeform,
    initialFlip: Flip.none,
  );

  result.rect; // the new rect
```
<Info>You can also use a **_isolates_** for these simultaneous resizing operations since this is a pure dart implementation.</Info>

You can use `BoxTransformer.move` to move a box.

```dart title="Moving a box"
  final Box rect = Box.fromLTWH(50, 50, 100, 100);
  final MoveResult result = BoxTransformer.move(
    initialRect: rect,
    initialLocalPosition: Vector2.zero(),
    localPosition: Vector2.zero(),
  );

  result.position; // the new position of the box
```

You can use `BoxTransformer.rotate` to rotate a box around its center.

```dart title="Rotating a box"
  final Box rect = Box.fromLTWH(0, 0, 100, 100);
  final RotateResult result = BoxTransformer.rotate(
    initialRect: rect,
    initialLocalPosition: Vector2(100, 50), // pointer at gesture start
    localPosition: Vector2(50, 100),        // pointer now
    initialRotation: 0.0,
  );

  result.rotation; // new rotation, in radians
  result.rect;     // rect, possibly translated to fit clamp at this angle
  result.feasible; // false when the angle could not be honored
```

`Box.rotation`, `BoxTransformer.rotate`, and the `BindingStrategy` enum (which controls whether clamp + constraints
apply to the unrotated logical rect or to the rendered axis-aligned bounding box) are documented in detail on the
[Rotating](/rotating) and [Binding Strategies](/binding_strategies) pages.

[boxTransform]: https://github.com/hyper-designed/box_transform