title: How can I rotate a Container widget in 2D around a specified anchor point?
body: <p>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. </p>
  
  <p>I tried using the <code>transform</code> property with <code>Matrix4.rotationZ</code>, which somewhat works – but the anchor point is in the <strong>top-left</strong> corner, not in the <strong>center</strong>. Is there an easy way to specify that anchor point? </p>
  
  <p>Furthermore, is there an easier way to 2D-rotate this widget that doesn't require Matrix4?</p>
  
  <p><a href="https://i.stack.imgur.com/yDwVK.png"><img src="https://i.stack.imgur.com/yDwVK.png" alt="desired and actual transformations"></a></p>
  
  <pre><code>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,
  );
  </code></pre>