Как я могу повернуть Container виджет в 2D вокруг заданной точки привязки?

Question

Я хотел бы выполнить очень простое двумерное вращение виджета контейнера (содержащего несколько других виджетов). Этот виджет будет вращаться вокруг одной неподвижной точки в центре, без деформаций.

Я попытался с помощью transform свойства с Matrix4.rotationZ, что несколько работ - но точка привязки находится в левом верхнем углу, а не в центре . Есть ли простой способ указать эту точку привязки?

Кроме того, есть ли более простой способ 2D-поворота этого виджета, который не требует 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

Применить перевод (к и от опоры) до и после поворота.

Вы можете создать себе небольшой виджет, который сделает это, и таким образом решить вашу другую проблему одновременно (скрывая матрицу4).

Answer 2

По рекомендации Яна я попробовал следующее. Кажется, он работает, по крайней мере, в моем ограниченном тестировании.

Обратите внимание, что я жестко запрограммировал ширину/высоту целевого контейнера. Таким образом, основными свойствами для этого контейнера являются ширина, высота, и трансформация. (То есть, я предпочел бы более чистый способ, который использует присущие свойства ширины/высоты контейнера.)

РЕДАКТИРОВАТЬ: Контейнер вложен в 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, 
);