Flutter中Row组件图标填满后如何自动换行避免报错

Row是单行列布局组件，不支持自动换行，当子组件总宽度超出组件可用宽度时就会触发布局越界，抛出你遇到的value: Not in inclusive range错误。

把外层的Row替换为Flutter内置的Wrap组件即可。Wrap会按水平方向依次排列子组件，当前行剩余空间不足以放下下一个子组件时，会自动将后续子组件放到下一行排列，正好满足你的需求。
你可以通过两个参数调整显示效果：

• spacing：设置同一行内相邻图标之间的水平间距
• runSpacing：设置不同行之间的垂直间距

// 建议给列表指定明确的Widget类型，避免类型推断异常
List<Widget> scorekeeper = [];

void score(bool userPickedAnswer) {
  setState(() {
    if (userPickedAnswer == correctAnswer) {
      scorekeeper.add(const Icon(Icons.check, color: Colors.green));
    } else {
      scorekeeper.add(const Icon(Icons.close, color: Colors.red));
    }
  });
}

// 替换原有Row组件为Wrap实现自动换行
Wrap(
  spacing: 8, // 同行图标水平间距，可根据UI需求调整数值
  runSpacing: 4, // 多行之间的垂直间距，可根据UI需求调整数值
  children: scorekeeper,
)

如果需要调整图标排列的对齐规则，可给Wrap设置alignment参数：比如传入WrapAlignment.center即可让每一行的图标整体居中显示，传入WrapAlignment.start则默认靠左侧排列。

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