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

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

Я попытался использовать свойство 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,
);

Ответ 1

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

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

Ответ 2

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

Контейнер вложен в виджет Transform. Использование 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,
);