How can I rotate a Container widget in 2D around a specified anchor point?

Question

I\'d like to perform a very simple 2D rotation of a Container widget (that contains a handful of other widgets.) This widget would be rotated around a single fixed point in the

Answer 1

Apply a translation (to and from the fulcrum) before and after the rotation.

You can create yourself a little widget that does this, and thus solve your other problem at the same time (hiding the Matrix4).

Answer 2

You can use RotatedBox Widget to rotate any widget:

RotatedBox(
    quarterTurns: 3,
    child: Container(
        color:Colors.red
    ),
),

Answer 3

For those who want to make an app like me, just using Transform and Gesturedetector. And remember don't use Draggable and Gesturedetector together because you only can drag and drop but you can't zooming widget :)).

Refer: A Deep Dive Into Transform Widgets in Flutter

barbswatanabe

:

             Transform.rotate(
                  alignment: FractionalOffset.center,
                  angle: state.listStickerModel[index].angle,
                  child: Transform(
                    alignment: FractionalOffset.center,
                    transform: new Matrix4.diagonal3(vector.Vector3(
                        state.listStickerModel[index].zoom,
                        state.listStickerModel[index].zoom,
                        state.listStickerModel[index].zoom)),
                    child: GestureDetector(
                      onScaleStart: (detail) {
                        _editPhotoBloc.add(UpdateSticker(
                          index: index,
                          offset: detail.focalPoint,
                          previousZoom: state.listStickerModel[index].zoom,
                        ));
                      },
                      onScaleUpdate: (detail) {
                        _editPhotoBloc.add(UpdateSticker(
                            index: index,
                            offset: Offset(detail.localFocalPoint.dx,
                                detail.focalPoint.dy),
                            angle: detail.rotation,
                            zoom:
                                state.listStickerModel[index].previousZoom *
                                    detail.scale));
                      },
                      child: Container(
                        alignment: Alignment.center,
                        child: SvgPicture.asset(
                            state.listStickerModel[index].src),
                      ),
                    ),
                  ),
                ),

Answer 4

Per Ian's advice, I gave the following a try. It appears to work, at least in my limited testing.

The container is nested within a Transform widget. Using alignment allows one to adjust the transform-origin in relative terms, i.e., in the center, the top left, etc.

var container = new Container (
  child: new Stack (
    children: [
      new Image.asset ( // background photo
        "assets/texture.jpg",
        fit: ImageFit.cover,
      ),
      new Center (
        child: new Transform (
          child: new Container (
            child: new Text (
              "Lorem ipsum",
              style: new TextStyle(
                color: Colors.white,
                fontSize: 42.0,
                fontWeight: FontWeight.w900,
              )
            ),
            decoration: new BoxDecoration (
              backgroundColor: Colors.black,
            ),
            padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),              
          ),
          alignment: FractionalOffset.center, // set transform origin
          transform: new Matrix4.rotationZ(0.174533), // rotate -10 deg
        ),
      ),
    ],
  ),
  width: 400.0,
  height: 200.0,
);