Flutter使用GridView出现底部21像素RenderFlex溢出报错如何解决？

问题原因 #

GridView默认的childAspectRatio（子项宽高比）为1.0，也就是每个网格默认是正方形。你的网格项内部是「图片+文字」的垂直Column布局，内容总高度超过了正方形分配的高度，所以触发底部溢出报错。

解决方案（无需嵌套SingleChildScrollView） #

• 方案1：调整网格子项宽高比
  在GridView.count构造中添加childAspectRatio参数，调整为适配你内容的比值。该参数是「子项宽度/子项高度」，数值越小，子项可容纳的高度越高，你可以根据实际内容效果微调数值：

GridView.count(
  crossAxisCount: 2,
  // 示例数值，可根据你的图片、文字大小自行调整
  childAspectRatio: 0.85,
  children: categorylist,
)

• 方案2：优化网格项内部布局，适配分配空间
  给网格项内的图片包裹Expanded组件，让图片自动适配网格项的剩余空间，避免硬编码的图片高度超出容器：

Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Expanded(
      child: Image.asset('assets/$image', fit: BoxFit.cover,),
    ),
    Padding(padding: EdgeInsets.all(5.0),),
    Text(newcharacter['name'], style: TextStyle(fontSize: 18.0),),
  ],
)

• 方案3：固定图片高度
  如果不想调整宽高比，也可以直接给图片设置固定高度，控制网格项总高度不超过分配值：

Image.asset(
  'assets/$image',
  fit: BoxFit.cover,
  height: 100, // 自行调整数值
),

内容的提问来源于stack exchange，提问作者New user