---
title: Resize Handles
---

# Resize Handles

By default, circular resize handles are used to resize the box. These handles are ideal for accessibility and can be
modified to create any type of resize handles.

Use `handleTapSize` to change the size of the invisible interactive gesture area that is used to resize the box.
The handle tap size is always larger than the handle to improve accessibility.

<Warning>Changing `handleTapSize` does not change the size of the handle UI.</Warning>

```dart title="Custom sized default handles"
  TransformableBox(
    rect: rect,
    flip: flip,
    handleTapSize: 34,
    onChanged: (event) {...},
    contentBuilder: (context, rect, flip) {...},
  );
```

You can customize the default handles or build your own handles using the `cornerHandleBuilder` and `sideHandleBuilder`
properties in the `TransformableBox` constructor. They both provide access to the `BuildContext` and `HandlePosition`
of the appropriate handle.

You can use `HandleAlignment` on `TransformableBox` to change the position of the handle's interactive area. By default,
the interactive area is aligned to the center of box corner/side.

```dart title="Putting handle completely inside the box area"
  TransformableBox(
    rect: rect,
    flip: flip,
    handleAlignment: HandleAlignment.inside,
    onChanged: (event) {...},
    contentBuilder: (context, rect, flip) {...},
  );
```

## Handle visibility

By default, handles will be hidden when `resizable` is set to `false`.

```dart title="Using the resizable boolean to hide handles"
  TransformableBox(
    rect: rect,
    flip: flip,
    resizable: false,
    onChanged: (event) {...},
    contentBuilder: (context, rect, flip) {...},
  );
```

You can alternatively selectively hide handles by providing your own `visibleHandles` set.

```dart title="Using the visibleHandles set to hide handles"
  TransformableBox(
    rect: rect,
    flip: flip,
    visibleHandles: {HandlePosition.right, HandlePosition.bottom, HandlePosition.bottomRight},
    onChanged: (event) {...},
    contentBuilder: (context, rect, flip) {...},
  );
```

## Handle Interaction

You can selectively disable handles but keep them visible at the same time by providing your own `enabledHandles` set.

```dart title="Using the enabledHandles set to disable handles"
  TransformableBox(
    rect: rect,
    flip: flip,
    enabledHandles: {HandlePosition.right, HandlePosition.bottom, HandlePosition.bottomRight},
    onChanged: (event) {...},
    contentBuilder: (context, rect, flip) {...},
  );
```

<Info>You can provide an empty set to disable all the handles but keep them visible and vice versa.</Info>

## Customizing the default handles

By default, `TransformableBox` uses `DefaultCornerHandle` and `DefaultSideHandle` to build the handles. You can
customize the default handles by providing a custom `decoration` and `size` to the `DefaultCornerHandle` and
`DefaultSideHandle` constructors.

```dart title="Custom sized default handles with rectangular shape"
  TransformableBox(
    rect: rect,
    flip: flip,
    cornerHandleBuilder: (context, handle) {
      return DefaultCornerHandle(
        handle: handle,
        size: 34,
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.rectangle,
        ),
      );
    },
    sideHandleBuilder: (context, handle) {
      return DefaultSideHandle(
        handle: handle,
        length: 34,
        thickness: 12,
        decoration: BoxDecoration(
          color: Colors.red,
        ),
      );
    },
    onChanged: (event) {...},
    contentBuilder: (context, rect, flip) {...},
  );
```

Since, side handles are not square, you can use the `length` and `thickness` properties to customize the size of the
side handles.

## Custom Handles

You can also use `cornerHandleBuilder` and `sideHandleBuilder` to build your own handles. You can use any widget
to build the handles.

```dart title="Using your own custom handles"
  TransformableBox(
    rect: rect,
    flip: flip,
    handleBuilder: (context, handle) {
      return MyCustomHandleWidget(handle: handle);
    },
    onChanged: (event) {...},
    contentBuilder: (context, rect, flip) {...},
  );
```
## Angular Handles

You can use `AngularHandle` to build angular handles that look like corner brackets.

<Image alt="Angular Handles" src="assets/angular_handles.png"/>

<Info>`AngularHandle` can render both corner handles and side handles.</Info>

```dart title="Using angular handles"
  TransformableBox(
    rect: rect,
    flip: flip,
    handleAlignment: HandleAlignment.inside,
    cornerHandleBuilder: (context, handle) {
      return AngularCornerHandle(
        handle: handle,
        handleAlign: HandleAlign.inside,
      );
    },
    sideHandleBuilder: (context, handle) {
      return AngularSideHandle(
        handle: handle,
        handleAlignment: HandleAlignment.inside,
      );
    },
    onChanged: (event) {...},
    contentBuilder: (context, rect, flip) {...},
  );
```

Use `handleAlignment` to align `AngularHandle` to the inside, outside or in the center of the box.

<Image alt="Angular Handle Alignements" src="assets/angular_handle_alignments.png"/>