如何让旋转后的图片适配固定尺寸的Flutter容器？

问题核心是Transform旋转操作在FittedBox完成适配后执行，旋转后的图片尺寸会超出原容器边界。要让旋转后的图片完全适配容器，需调整适配逻辑并计算旋转后的缩放比例。

修改后的代码方案一（手动计算缩放因子） #

Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          color: Colors.red,
          height: 450,
          width: 140, // 固定尺寸容器需明确宽高，FittedBox才能正确计算约束
          child: FittedBox(
            fit: BoxFit.contain,
            child: Transform(
              alignment: Alignment.center,
              transform: Matrix4.identity()
                ..rotateZ(pi / 4)
                ..scale(1 / sqrt(2)), // 旋转45度后，缩放因子设为1/√2，确保图片不超出容器
              child: Image.asset(
                'assets/arts/woman_avatar.jpeg',
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ],
    ),
  ),
)

关键调整说明 #

• 给Container补充width属性：固定尺寸容器需同时指定宽高，FittedBox才能基于明确约束做适配。
• 添加旋转缩放因子：正方形旋转45度后对角线长度为原边长的√2倍，缩放1/√2可让旋转后的图片刚好贴合容器边界。
• 调整图片适配规则：Image的fit: BoxFit.cover配合FittedBox的BoxFit.contain，确保图片填充容器且不超出。

灵活适配方案（动态计算缩放比例） #

如果容器尺寸不固定，可通过LayoutBuilder动态获取容器约束，自动计算缩放比例：

Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          color: Colors.red,
          height: 450,
          width: 140,
          child: LayoutBuilder(
            builder: (context, constraints) {
              // 根据容器宽高比动态计算缩放比例，适配任意尺寸容器
              final maxScale = min(
                constraints.maxWidth / constraints.maxHeight,
                constraints.maxHeight / constraints.maxWidth,
              ) * sqrt(2);
              return FittedBox(
                fit: BoxFit.contain,
                child: Transform(
                  alignment: Alignment.center,
                  transform: Matrix4.identity()
                    ..rotateZ(pi / 4)
                    ..scale(maxScale),
                  child: Image.asset(
                    'assets/arts/woman_avatar.jpeg',
                    fit: BoxFit.cover,
                  ),
                ),
              );
            },
          ),
        ),
      ],
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Ariful Jannat Arif