InteractiveViewer for profile photo cropping.

This is still a work in progress, but I was able to use InteractiveViewer in a custom widget and save transformation data in FB . Then load transformation data to display a rounder profile image as the user adjusted it. I'm not sure if I overlooked a better way to do this, but here is what I did: [test.mp4]

 
Create a Local State variable:
photoTransformation1: double, IsList: true

Create a new custom widget: PicInteractiveViewer

With 4 parameters:

photo:  imagePath
minScale: double
maxScale: double
panEnabled: boolean
scaleEnabled: boolean
borderRadius: double //this is used to set the ClipRRect 
initTransformation: double: IsList

--No need to add any packages

Here is the code:
class PicInteractiveViewer extends StatefulWidget {
  const PicInteractiveViewer(
      {Key key,
      this.width,
      this.height,
      this.photo,
      this.minScale = 0.1,
      this.maxScale = 5.0,
      this.borderRadius = 100,
      this.panEnabled = true,
      this.scaleEnabled = true,
      this.initTransformation})
      : super(key: key);
  final List initTransformation;
  final double width;
  final double height;
  final String photo;
  final double minScale;
  final double maxScale;
  final double borderRadius;
  final bool panEnabled;
  final bool scaleEnabled;
  @override
  _PicInteractiveViewerState createState() => _PicInteractiveViewerState();
}

class _PicInteractiveViewerState extends State {
  Matrix4 transformation;
  List transformList;

  TransformationController controller = TransformationController();

  @override
  Widget build(BuildContext context) {
    if (widget.initTransformation.isNotEmpty &&
        widget.initTransformation.length == 16) {
      //controller.value = Matrix4(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
      controller = TransformationController(
          Matrix4.fromFloat64List(widget.initTransformation));
    }

    return ClipRRect(
      borderRadius: BorderRadius.circular(widget.borderRadius),
      child: InteractiveViewer(
          child: Image.network(widget.photo, fit: BoxFit.fitWidth),
          maxScale: widget.maxScale,
          minScale: widget.minScale,
          panEnabled: widget.panEnabled,
          scaleEnabled: widget.scaleEnabled,
          transformationController: controller,
          onInteractionEnd: (ScaleEndDetails endDetails) {
            FFAppState().photoTransformation1 = controller.value.storage;
            setState(() {
              transformation = controller.value;
              transformList = controller.value.storage;
            });
          }),
    );
  }
}  

I'm saving the transformation to localState for testing,  I could not find a way to return the widget state to a FF action, if you know how, I would love to know.  You can use LocalState variable photoTransformation1 to set the initTransformation parameter on your widget. This will load the InteractiveViewer with the transformation applied. You can also set the panEnabled, and scaleEnabled to false  Ideally you would crop or send transform info to API and save various versions. Let me know if there is a better way to do this. [test7.mp4]