Flutter: How to move, rotate and zoom the container?

Question

I want to make a container which can be dragged around, zoom and rotate. I am able to achieve a zoom. Below is my code:

//variable declaration
  double _scal         


        

Answer 1

You can also use photo_viewer instead of matrix_gesture_detector. More info in this answer: https://stackoverflow.com/a/62426232/2942294

Answer 2

use Matrix Gesture Detector package1 package, here you have the basic sample:

MatrixGestureDetector(
  onMatrixUpdate: (m, tm, sm, rm) {
    setState(() {
      matrix = n;
    });
  },
  child: Transform(
    transform: matrix,
    child: ....
  ),
),

for more sample code refer to example folder that contains 6 demos

Answer 3

You can use RotatedBox widget (for rotation) along with InteractiveViewer widget(for zoom in and zoom out).

panEnabled property in InteractiveViewer widget used for moving the container

Scaffold(
    backgroundColor: Colors.black,
    body: Center(
      child: RotatedBox(
        quarterTurns: 1,
        child: InteractiveViewer(
          boundaryMargin: EdgeInsets.zero,
          minScale: 1,
          maxScale: 4,
          child: Container(
            height: 200,
            width: 200,
            color: Colors.blue,
          ),
        ),
      ),
    ),
  ),