Stickers on Image (draggable, scalable and rotatable)

Question

I need to do something like sticker on image. I want it draggable, scalable and rotatable. Is it possible with flutter?

I found class draggable on https://stackoverflow.com/a/53957707/1984747

Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: position.dx,
          //top: position.dy - height + 20,
          child: Draggable(
            child: Container(
              width: width,
              height: height,
              color: Colors.blue,
              child: Center(child: Text("Drag", style: Theme.of(context).textTheme.headline,),),
            ),
            feedback: Container(
              child: Center(
                child: Text("Drag", style: Theme.of(context).textTheme.headline,),),
              color: Colors.red[800],
              width: width,
              height: height,
            ),
            onDraggableCanceled: (Velocity velocity, Offset offset){
              setState(() => position = offset);
            },
          ),
        ),
      ],
    );
  }

Please some hint.

Answer 1

GestureDetector() can be used to detect scale and rotation gesture.

Then you will need to calculate scale & rotation, and apply transformation using Transform

However if your sticker is small I can't imagine how this would work (no space to place 2 touch points on a small thing). So you probably will want to use gesture detector as big as the image.

class _YourWidgetState extends State<YourWidget> {

double finalScale = 1.0;
double finalRotation = 0.0;
ScaleUpdateDetails scaleStart;

Widget build() {
  return GestureDetector(
    onScaleStart: (ScaleUpdateDetails details) => {
        // you will need this in order to calculate difference
        // in rotation and scale:
        scaleStart = details;
    },
    onScaleUpdate: (ScaleUpdateDetails details) => {
       setState(() => {
         finalScale =  <calculate final scale here>
         finalRotation =  <calculate final rotation here>
       })
    },
    child: Stack(children: [
       <image widget>,
       Transform(
          transform: Matrix4.diagonal3(Vector3(finalScale, finalScale, finalScale))..rotateZ(finalRotation),
          child: <sticker widget>
       )
    ])
  )
}

}

alternatively instead of GestureDetector() to detect scaling/rotation, you could employ slide bars to allow to control the value and then pass scale/rotation values to Transform.