---
title: Getting Started
---

# Getting Started

## Installation

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

```dart
  dependencies:
    flutter_box_transform: <latest_version>
```
or run following command in your project directory:

```shell
  flutter pub add flutter_box_transform
```

## Usage
Wrap the widget you want to resize or move with `TransformableBox`.

<Warning>**_TransformableBox_** internally uses **_Positioned_** to place its content at a given position with a given
size. So, **_TransformableBox_** must be a child of a **_Stack_** widget.</Warning>

```dart title="Using TransformableBox inside a Stack"
  Stack(
    children: [
      TransformableBox(
        rect: rect,
        flip: flip,
        onChanged: (event) {
          setState(() { // update the state
            box = event.rect;
            flip = event.flip;
          });
        },
        contentBuilder: (context, rect, flip) => Transform.scale(
          scaleX: flip.isHorizontal ? -1 : 1,
          scaleY: flip.isVertical ? -1 : 1,
          child: Image.asset( // your widget goes here.
            'assets/images/landscape.jpg',
            width: rect.width,
            height: rect.height,
            fit: BoxFit.fill,
          ),
        ),
      ),
    ],
  );
```

`onChanged` callback is called when user resizes or moves the box. You can use this callback to update the box by calling
`setState` method explicitly.

<Info>**_TransformableBox_** follows flutter's widget patterns by not storing any state. You must store the box and
flip state by yourself in your widget's state class and pass it to **_TransformableBox_** as constructor parameters.
Be sure to call **_setState_** to refresh the UI when changes occur.</Info>