Flutter中Wrap组件内的Container无法获取最大宽度怎么解决？

问题原因 #

Wrap组件的布局逻辑是根据子项尺寸动态调整自身空间，直接给子Container设置width: double.infinity会触发布局约束冲突——Wrap无法为子项提供明确的宽度边界，导致布局计算失败。

解决方案 #

方案一：让所有子项自动拉伸（推荐）

给Wrap添加crossAxisAlignment: WrapCrossAlignment.stretch属性，使所有子项在交叉轴方向（当前为水平方向，因Wrap的direction设为Axis.vertical）自动占满Wrap的宽度，无需手动设置Container的width：

Container(
  width: 150,
  color: Colors.grey.shade300,
  child: Wrap(
    direction: Axis.vertical,
    crossAxisAlignment: WrapCrossAlignment.stretch,
    children: [
      Text("Hi there!"),
      Text("This is a very long long string to show!"),
      Container(
        color: Colors.teal,
        height: 5,
      ),
      Text("The end."),
    ],
  ),
)

方案二：仅让特定子项占满宽度

如果不想影响其他子项的宽度表现，可使用LayoutBuilder获取Wrap的宽度约束，再将该值赋予目标Container：

Container(
  width: 150,
  color: Colors.grey.shade300,
  child: Wrap(
    direction: Axis.vertical,
    children: [
      Text("Hi there!"),
      Text("This is a very long long string to show!"),
      LayoutBuilder(
        builder: (context, constraints) {
          return Container(
            color: Colors.teal,
            height: 5,
            width: constraints.maxWidth,
          );
        },
      ),
      Text("The end."),
    ],
  ),
)

内容的提问来源于stack exchange，提问作者sm-sayedi