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 center, with no deformations.

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

Furthermore, 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

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, ); 

Answer 2

You can use RotatedBox Widget to rotate any widget:

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