如何解决Flutter开发中「底部RenderFlex溢出77像素」的报错

问题根因 #

• 你给body外层的Container强制设置了固定高度height: 100，但容器内Column子组件的总高度（图片高度 + SizedBox的30px + TextField默认高度）远大于100px，内容放不下就触发了RenderFlex溢出报错。

解决方案 #

方案1：移除外层Container的固定高度限制，让容器自适应内容高度 #

把body对应Container代码里的height: 100删掉即可，修改后代码片段：

body: Container(
  width: MediaQuery.of(context).size.width,
  // 删掉固定高度设置
  color: Color(0xFFFFDEE2),
  padding: EdgeInsets.all(16), // 可加内边距避免内容贴边
  child: Column(
    mainAxisSize: MainAxisSize.min, // 让Column高度适配内容，不占满全屏
    children: <Widget>[
      Image.asset("doodles/DinnerPlace.png"),
      SizedBox(height: 30,),
      Container(
        decoration: BoxDecoration(color : Colors.white, borderRadius: BorderRadius.circular(14)),
        child: TextField(
          decoration: InputDecoration(
            border: InputBorder.none,
            prefixIcon: Icon(Icons.search,color: Colors.grey,size : 33),
            hintText: "Search",
            hintStyle: TextStyle(
                fontFamily: "SFProDisplay",
                color : Colors.grey,
                fontSize: 20.0
            ),
          ),
        )
      ),
    ],
  ),
),

方案2：如果需要固定容器高度，给Column加滚动能力 #

如果业务要求外层容器高度就是100px，就把Column包裹在SingleChildScrollView中，让超出的内容可以滚动：

body: Container(
  width: MediaQuery.of(context).size.width,
  height: 100,
  color: Color(0xFFFFDEE2),
  child: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        // 原有子组件保持不变
      ],
    ),
  ),
),

方案3：压缩子组件高度适配容器 #

如果需要固定容器高度也不想滚动，就给Image组件设置高度限制：

Image.asset(
  "doodles/DinnerPlace.png",
  height: 30, // 自行调整为合适高度，确保子组件总高度不超过100px
  fit: BoxFit.contain,
),

内容的提问来源于stack exchange，提问作者Coding-Jutsu