Flutter报BoxConstraints forces an infinite height错误如何解决？

错误原因 #

• SingleChildScrollView 为子组件提供垂直方向的无限高度约束
• 你给Stack设置了fit: StackFit.expand属性，该属性要求Stack撑满父组件的所有可用空间，父级垂直方向为无限高度时，Stack无法计算自身尺寸，就会触发BoxConstraints forces an infinite height报错。

解决方案 #

根据你的实际需求选择对应方案即可：

方案1：背景图固定，内容滚动（绝大多数场景的需求） #

调整布局结构，将Stack放在最外层，SingleChildScrollView作为Stack的子组件：

body: Stack(
  fit: StackFit.expand,
  children: [
    Image(
      color: Colors.black12,
      colorBlendMode: BlendMode.darken,
      image: AssetImage('images/Alone.jpg'),
      fit: BoxFit.cover,
    ),
    SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Show('Alone is Stronger', 'y'),
          // 其余需要滚动的内容可直接添加在此处
        ],
      ),
    )
  ],
)

该方案下Stack会撑满整个页面的可用空间，背景图铺满全页，滚动内容放在SingleChildScrollView中，不会出现无限高度约束冲突。

方案2：背景图跟随内容一起滚动 #

保留原结构，删除Stack的fit: StackFit.expand属性，改用Positioned.fill包裹背景图：

body:SingleChildScrollView(
  child: Stack(
    children: [
      Positioned.fill(
        child: Image(
          color: Colors.black12,
          colorBlendMode: BlendMode.darken,
          image: AssetImage('images/Alone.jpg'),
          fit: BoxFit.cover,
        ),
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Show('Alone is Stronger', 'y'),
          // 其余内容可直接添加在此处
        ],
      )
    ],
  ),
)

该方案下Stack会自动适配内部Column的高度，背景图会跟随整个滚动内容一起上下滑动。

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