Flutter中使用Flexible包裹文本时如何避免RenderBox错误？

错误原因 #

你遇到的RenderFlex children have non-zero flex but incoming width constraints are unbounded错误，核心原因是你的Row组件处于无界宽度的父容器中（比如父组件是另一个Row、横向滚动的ListView，或是未设置宽度的Container）。此时Row无法确定自身的可用宽度范围，内部的Flexible（带flex属性）也就无法计算自己的尺寸，从而触发渲染异常。

之前你尝试的包裹Container但未设置宽度、给Text加Overflow.clip都没用，因为根本问题是Row的宽度约束未被限定。

具体解决方案 #

方案1：给外层Row添加明确的宽度约束

用Container、SizedBox或ConstrainedBox包裹Row，直接指定宽度，让Row获得有界的宽度约束。推荐使用MediaQuery获取屏幕宽度来适配不同设备：

Widget buildRadioButton(String label, String value, String? groupValue,
    Function(String?) onChanged) {
  return Container(
    // 用屏幕宽度作为Row的最大宽度，也可以设置固定值如300
    width: MediaQuery.of(context).size.width,
    child: Row(
      children: [
        Radio(
          value: value,
          groupValue: groupValue,
          onChanged: onChanged,
          activeColor: Theme.of(context).colorScheme.onBackground,
          fillColor: MaterialStateColor.resolveWith(
            (states) => Theme.of(context).colorScheme.onBackground,
          ),
        ),
        Flexible(
          child: Text(
            label,
            style: const TextStyle(fontSize: 18),
            overflow: TextOverflow.ellipsis, // 可选：防止文本过长溢出
          ),
        ),
        const SizedBox(width: 25),
      ],
    ),
  );
}

方案2：如果buildRadioButton嵌套在另一个Row中

若这个单选按钮组件是作为另一个Row的子组件，需要把整个buildRadioButton的返回值放在Flexible/Expanded里，让父Row给它分配可用宽度：

// 父组件示例
Row(
  children: [
    // 其他组件
    Flexible(
      child: buildRadioButton("标签", "值", "选中值", (val) {}),
    ),
  ],
)

方案3：简化内部组件（可选）

如果你的文本不需要自动换行或占满剩余空间，可以直接去掉Flexible，给Text设置maxLines和overflow：

Widget buildRadioButton(String label, String value, String? groupValue,
    Function(String?) onChanged) {
  return Row(
    children: [
      Radio(...), // 保持原有Radio配置
      Text(
        label,
        style: const TextStyle(fontSize: 18),
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
      const SizedBox(width: 25),
    ],
  );
}

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