Flutter中Stack内Widget溢出警告问题求助

作为Dart和Flutter新手，我需要让Stack中的Widget超出父组件显示，目前已实现预期视觉效果，但出现以下溢出警告：

• A RenderConstraintsTransformBox overflowed by 50 pixels on the left.
• A RenderConstraintsTransformBox overflowed by 50 pixels on the right.

尝试过在不同层级使用OverflowBox、给Text包裹Flexible，但都无法解决警告，现寻求解决方法。

相关代码：

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    double size = MediaQuery.of(context).size.width;

    return Scaffold(
      body: Center(
        child: SizedBox(
          width: size,
          height: size,
          child: Stack(
            children: <Widget>[
              Container(
                color: Colors.green,
              ),
              Container(
                alignment: Alignment.center,
                child: buildElement(),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget buildElement() {
    return SizedBox(
      height: 50,
      width: 50,
      child: Stack(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            color: Colors.red,
          ),
          Container(
            alignment: Alignment.topLeft,
            child: UnconstrainedBox(
              alignment: Alignment.topLeft,
              child: FractionalTranslation(
                translation: const Offset(-0.5, -0.5),
                child: buildSomeComponent(),
              ),
            ),
          ),
          Container(
            alignment: Alignment.bottomRight,
            child: UnconstrainedBox(
              alignment: Alignment.bottomRight,
              child: FractionalTranslation(
                translation: const Offset(0.5, 0.5),
                child: buildSomeComponent(),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget buildSomeComponent() {
    return Container(
      color: Colors.cyan,
      child: const Text(
        '[::::::::::::::::::::]',
        overflow: TextOverflow.visible,
        softWrap: false,
        textAlign: TextAlign.center,
      ),
    );
  }
}

效果展示：

（红色框为主要内容，青色框为类提示组件）

问题根源是50x50的SizedBox给了严格的尺寸约束，而通过FractionalTranslation偏移后的组件超出了该约束范围，触发溢出警告。只需通过OverflowBox解除父级约束限制，并设置Stack允许子组件超出自身范围即可解决：

1. 在buildElement函数中，给Stack外层包裹OverflowBox，设置maxWidth和maxHeight为double.infinity，允许子组件无限扩展；
2. 给Stack添加clipBehavior: Clip.none，禁止裁剪超出范围的子组件。

修改后的完整代码：

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    double size = MediaQuery.of(context).size.width;

    return Scaffold(
      body: Center(
        child: SizedBox(
          width: size,
          height: size,
          child: Stack(
            children: <Widget>[
              Container(
                color: Colors.green,
              ),
              Container(
                alignment: Alignment.center,
                child: buildElement(),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget buildElement() {
    return SizedBox(
      height: 50,
      width: 50,
      child: OverflowBox(
        minWidth: 0,
        maxWidth: double.infinity,
        minHeight: 0,
        maxHeight: double.infinity,
        child: Stack(
          clipBehavior: Clip.none, // 允许子组件超出Stack范围，不裁剪
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              color: Colors.red,
            ),
            Container(
              alignment: Alignment.topLeft,
              child: UnconstrainedBox(
                alignment: Alignment.topLeft,
                child: FractionalTranslation(
                  translation: const Offset(-0.5, -0.5),
                  child: buildSomeComponent(),
                ),
              ),
            ),
            Container(
              alignment: Alignment.bottomRight,
              child: UnconstrainedBox(
                alignment: Alignment.bottomRight,
                child: FractionalTranslation(
                  translation: const Offset(0.5, 0.5),
                  child: buildSomeComponent(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildSomeComponent() {
    return Container(
      color: Colors.cyan,
      child: const Text(
        '[::::::::::::::::::::]',
        overflow: TextOverflow.visible,
        softWrap: false,
        textAlign: TextAlign.center,
      ),
    );
  }
}

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