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,
  );

  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 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.

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.

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.