Flutter旋转容器设置blurRadius属性出现异常变形问题求解

这个问题来源于Flutter的离屏渲染机制和3D变换的适配缺陷：

1. 当BoxShadow设置了非0的blurRadius时，Flutter会自动触发saveLayer对该组件做离屏渲染，生成一张2D缓存纹理后再绘制到屏幕上，以此提升渲染效率。
2. 你使用的带透视参数的Matrix43D变换，作用的是最终绘制的2D纹理，而非组件本身的3D空间属性。离屏渲染生成的纹理没有携带任何3D透视信息，当容器旋转至和屏幕接近垂直的角度时，2D纹理会被强行拉伸成窄条，原本均匀的模糊效果就会出现扭曲、断层的异常表现。
3. 额外的，模糊效果的范围通常会超出组件本身的尺寸，离屏渲染的缓存纹理会自动裁切超出的模糊部分，旋转时裁切边界被拉伸会进一步加剧变形。

• 方案1（改造成本最低）：给被3D变换的Container添加足够的内边距，让模糊效果完全被包含在离屏渲染的缓存范围内，避免裁切导致的拉伸变形。你设置的spreadRadius为40、blurRadius为50，总和为90，给Container外层套一个Padding设置EdgeInsets.all(90)即可，若布局位置偏移可在外层加Transform.translate调整位置。
  修改示例代码如下：

child: AnimatedBuilder(
  animation: _controller,
  builder: (_, child) {
    return Transform(
      alignment: FractionalOffset.center,
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.002)
        ..rotateY(0.5 * -math.pi)
        ..rotateZ(-0.1 * math.pi)
        ..rotateY((_controller.value - 0.6) * -math.pi)
        ..rotateX(0.5 * math.pi),
      child: child,
    );
  },
  // 调整后的子组件部分
  child: Padding(
    // 内边距完全覆盖模糊扩散范围，避免裁切
    padding: const EdgeInsets.all(90),
    child: Container(
      height: 300,
      width: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(40),
        boxShadow: [
          BoxShadow(
            color: Colors.yellow.withOpacity(0.5),
            spreadRadius: 40,
            blurRadius: 50,
            offset: const Offset(0, 0),
          ),
        ],
      ),
    ),
  ),
),

• 方案2（效果更稳定）：将阴影和容器本体分层绘制，不要把BoxShadow写在被3D变换的Container属性中。用Stack包裹Transform组件，在Transform的下层新增一个和Container尺寸、圆角、变换参数完全一致的独立Widget，专门用来渲染模糊阴影，上层只放纯色圆角的Container本体，避免单图层同时承载内容和模糊效果导致的离屏渲染异常。
• 方案3（适合新版本用户）：切换到Flutter官方的Impeller渲染器，该渲染器对3D变换和离屏渲染的适配做了大量优化，绝大多数场景下可以直接解决这个变形问题，不需要修改业务代码。

内容的提问来源于stack exchange，提问作者who-aditya-nawandar