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

Question

I would like to perform a very simple two-dimensional rotation of the Container widget (containing several other widgets). This widget will rotate around one fixed point in the center, without deformation.

I tried using the transform property with Matrix4.rotationZ , which works somewhat, but the anchor point is in the corner at the top left and not in the center . Is there an easy way to specify this anchor point?

Also, is there an easier way to 2D rotate this widget that doesn't require Matrix4?

 var container = new Container ( child: new Stack ( children: [ new Image.asset ( // background photo "assets/texture.jpg", fit: ImageFit.cover, ), new Center ( 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), transform: new Matrix4.rotationZ(0.174533), // rotate -10 deg ), ), ], ), width: 400.0, height: 200.0, ); 

Answer 1

Apply translation (before and from the fulcrum) before and after the turn.

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

Answer 2

On Jan’s advice, I tried the following. It seems to work, at least in my limited testing.

The container is embedded in the Transform widget . Using alignment allows you to adjust the source of the conversion in relative units, i.e. In the center, 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, );