Flutter：如何让Transform变换组件内文本居中并编辑子组件？

问题描述 #

• 在Transform缩放/旋转组件内，如何让Text组件居中且不受变换影响？
• 如何编辑被Transform缩放组件包裹的子组件？

场景重现 #

使用以下代码时，Container被旋转45度后，内部的Text也会随之旋转，无法实现文本居中且正常显示的预期效果：

Transform.rotate(
              angle: math.pi / 4,
              child: Container(
                height: 100,
                width: 100,
                color: const Color(0xff565758),
                child: const Text("Lorem ipsum"),
              ),
            ),

尝试过Transform、Transform.scale、FittedBox组件，均未能解决该问题。

解决方案 #

通过Stack组件嵌套即可实现需求：将变换后的Container与独立居中的Text分别作为Stack的子项，代码示例如下：

Stack(
          children: [
            Transform.rotate(
              angle: math.pi / 4,
              child: Container(
                height: 100,
                width: 100,
                color: const Color(0xff565758),
              ),
            ),
            const Positioned.fill(child: Align(alignment: Alignment.center, child: Text("Lorem ipsum")))
          ],
        ),

内容的提问来源于stack exchange，提问作者user22198624