コンテナウィジェットを指定したアンカーポイントを中心に2Dで回転させるにはどうすればよいですか？

Question

私はコンテナウィジェット（いくつかの他のウィジェットが含まれています）の非常に単純な2D回転を実行したいと思います。このウィジェットは、変形なしで中央の単一の固定ポイントを中心に回転します。

私はやや働く、Matrix4.rotationZでtransformプロパティを使用してみました - しかし、アンカーポイントは、左上隅ではなく、中央です。アンカーポイントを指定する簡単な方法はありますか？

さらに、Matrix4を必要としないこのウィジェットを2D回転する方が簡単ですか？

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

回転前と後（支点にしてから）の変換を適用します。

これを行う小さなウィジェットを自分で作成し、同時に他の問題を解決することができます（Matrix4を隠す）。

Answer 2

イアンの助言に基づいて、私は次のようにしました。私の限られたテストでは、うまくいくように見えます。

ターゲットコンテナの幅と高さをハードコードしています。したがって、コンテナの主なプロパティは、 の幅、高さ、および の変換です。 （それは私がコンテナの固有の幅/高さのプロパティを使用してクリーンな方法を好むだろう、と述べた。）

EDIT：容器はTransform widget内にネストされています。 alignmentを使用することにより、変換原点を相対的な、すなわち中央、左上などで調整することができる。

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