如何让Flutter Web容器自适应屏幕的完整高度与宽度？

错误原因 #

去掉硬编码的宽高后，Column的父容器（Container）没有明确的高度约束，导致Column的高度被判定为无限值。而Expanded组件需要父级提供确定的剩余空间，因此触发了RenderFlex children have non-zero flex but incoming height constraints are unbounded的断言错误。

解决方案 #

给Container添加约束配置，让它既可以占满父容器的可用空间，同时保留最小宽高限制：

Widget build(BuildContext context) {
  return Container(
    constraints: const BoxConstraints(
      minWidth: 800, // 自定义最小宽度
      minHeight: 500, // 自定义最小高度
      maxWidth: double.infinity, // 宽度尽可能铺满父容器
      maxHeight: double.infinity, // 高度尽可能铺满父容器
    ),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.blueAccent),
    ),
    child: Column(
      children: [
        Expanded(
          child: ListView.builder(
              itemCount: dataList.length,
              itemBuilder: (BuildContext context, int index) {
                return dataCard(context, dataList, index);
              }),
        ),
        const SizedBox(height: 20),
        TextButton(
          onPressed: () {},
          child: const Text('add'),
        )
      ],
    ),
  );
}

Widget dataCard(context, dl, i) {
  return Row(
    children: [
      Expanded(
        flex: 1,
        child: Text(dl[i].id.toString()),
      ),
      Expanded(
        flex: 4,
        child: Text(dl[i].chinesename),
      ),
      Expanded(
        flex: 4,
        child: Text(dl[i].englishname),
      ),
      Expanded(
        flex: 1,
        child: TextButton(
          onPressed: () {},
          child: const Text('Edit'),
        ),
      ),
      Expanded(
        flex: 1,
        child: TextButton(
          onPressed: () {},
          child: const Text('Delete'),
        ),
      ),
    ],
  );
}

效果说明 #

• 当窗口尺寸大于设置的最小宽高时，容器会自动铺满整个窗口；
• 当窗口尺寸小于最小宽高时，容器会保持设置的最小尺寸（若父容器允许滚动，会出现滚动条适配）；
• 内部的Expanded组件可以正常占据Column的剩余空间，ListView也能正常滚动。

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