Getting Started

Installation#

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

  dependencies:
    flutter_box_transform: <latest_version>

or run following command in your project directory:

  flutter pub add flutter_box_transform

Usage#

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

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.

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.

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.