Flutter中为何出现RenderFlex右侧溢出8.0像素的问题？

问题原因 #

你在AlertDialog的标题Row中同时放置了文本和图片，当文本内容长度加上图片宽度超过标题区域的可用宽度时，就会触发RenderFlex右侧溢出的错误。

修复方案 #

将标题中的Text组件用Expanded包裹，让文本自动占用Row的剩余空间并在需要时换行，避免和图片一起撑爆布局：

return showDialog(
  context: context,
  barrierColor: Colors.transparent,
  builder: (context) {
    return AlertDialog(
      title: Row(children: [
        Expanded(
          child: Text(
            '  Alert Dialog Title. $a ',
            softWrap: true,
          ),
        ),
        Image.asset(
          'assets/alert.png',
          scale: 1.0,
          width: 20,
          height: 20,
          fit: BoxFit.contain,
        ),
      ]),
      backgroundColor: Colors.deepOrangeAccent[700],
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(20.0),
        ),
        side: BorderSide(
          color: Colors.white,
          width: 3,
        )
      ),
      alignment: Alignment.topCenter,
    );
  }
);

关键改动说明 #

• 移除原代码中包裹Row的Flexible，改用Expanded包裹Text组件，确保文本能自适应剩余宽度并换行
• 给Text添加softWrap: true（默认值为true，显式声明更直观），明确允许文本换行

这样修改后，标题区域的布局会自动适配弹窗宽度，不会再出现溢出问题，同时能实现你想要的文本与图片并排的预期效果。

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