使用Flutter开发餐厅列表时出现RenderFlex右侧溢出3像素异常如何解决

报错信息：Another exception was thrown: A RenderFlex overflowed by 3.0 pixels on the right

• 该报错本质是子组件的宽度超出了父组件分配的可用横向空间。你代码中的FadeInImage.memoryNetwork未设置尺寸适配属性，加载的餐厅图片原始宽度大于父容器允许的最大宽度时，会按原始尺寸撑开导致溢出。
• 现有代码的Stack、ClipRRect外层没有明确的宽高约束，默认会匹配子组件的最大尺寸，当该组件嵌套在横向布局（如Row、固定宽度的列表卡片）中时，就会出现右侧溢出的问题。

1. 给FadeInImage添加fit: BoxFit.cover属性，强制图片适配父容器尺寸，不会按原始宽高撑开。
2. 给Stack添加fit: StackFit.expand属性，让所有子元素强制适配Stack的尺寸。
3. 如果该组件的父容器是Row布局，外层用Expanded包裹自动分配可用宽度；如果是固定尺寸的卡片，外层用SizedBox指定宽高即可。

修改后参考代码：

// 父组件为Row时的写法：外层加Expanded分配横向空间
Expanded(
  child: Padding(
    padding: const EdgeInsets.all(0),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(20.0),
      child: Stack(
        fit: StackFit.expand, // 新增：子元素强制适配Stack尺寸
        children: <Widget>[
          Positioned.fill(
            child: Align(
              alignment: Alignment.center,
              child: Container(height: 210, child: Loading()),
            )
          ),
          Center(
            child: FadeInImage.memoryNetwork(
              fit: BoxFit.cover, // 新增：图片适配父容器
              placeholder: kTransparentImage,
              image: restaurant.image,
            ),
          )
        ],
      )
    ),
  ),
)

// 固定尺寸卡片写法：把外层Expanded换成SizedBox即可
// SizedBox(
//   width: 300,
//   height: 210,
//   child: 上述Padding内的原有代码...
// )

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