AnimatedContainer溢出问题：滑动动画控件未适配容器尺寸的解决方法

问题分析 #

你的代码中，AnimatedContainer的宽度会在0和屏幕宽度之间切换，但内部子控件（尤其是ConsumoDetailPanel）没有跟随父容器的宽度变化适配，导致宽度收缩时子控件尺寸超出AnimatedContainer范围，引发溢出错误。此外，嵌套的Container和Row结构未对宽度变化做约束，进一步加剧了该问题。

解决方案 #

通过以下调整让子控件严格跟随AnimatedContainer的尺寸变化：

1. 给内部Container添加宽度约束
   让内部Container继承AnimatedContainer的宽度，确保子控件的可用空间与父容器同步：

AnimatedContainer(
  duration: 300.milliseconds,
  width: store.isExpanded ? MediaQuery.of(context).size.width : 0,
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(color: Colors.grey.shade900.withOpacity(.4)),
    ],
  ),
  child: Container(
    // 添加该行，让子Container继承父容器宽度
    width: double.infinity,
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          color: Colors.grey.shade900.withOpacity(.4),
        ),
      ],
    ),
    // 其余代码
  ),
)

2. 约束Row的尺寸行为
   给Row添加mainAxisSize: MainAxisSize.min，避免Row强制扩展超出父容器宽度：

child: Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    // 子控件代码
  ],
),

3. 让ConsumoDetailPanel适配宽度变化
   如果ConsumoDetailPanel是自定义组件，用LayoutBuilder获取父容器的可用宽度并传递给组件：

Container(
  decoration: BoxDecoration(
    color: Colors.grey.shade200,
    borderRadius: BorderRadius.only(
      topRight: Radius.circular(20),
      bottomRight: Radius.circular(20),
    ),
  ),
  child: LayoutBuilder(
    builder: (context, constraints) {
      return ConsumoDetailPanel(
        mesa: widget.mesa,
        store: store,
        maxWidth: constraints.maxWidth,
      );
    },
  ),
),

若组件不支持外部宽度控制，可临时用ClipRect裁剪超出部分：

ClipRect(
  child: ConsumoDetailPanel(
    mesa: widget.mesa,
    store: store,
  ),
),

4. 优化关闭按钮的可见性
   当AnimatedContainer宽度为0时，隐藏右侧InkWell，避免占用不必要空间：

store.isExpanded
    ? Expanded(
        child: InkWell(
          splashColor: Colors.grey.shade200,
          highlightColor: Colors.grey.shade200,
          onTap: () => store.toggleIsExpanded(false),
        ),
      )
    : SizedBox.shrink(),

修改后的完整代码 #

AnimatedContainer(
  duration: 300.milliseconds,
  width: store.isExpanded ? MediaQuery.of(context).size.width : 0,
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(color: Colors.grey.shade900.withOpacity(.4)),
    ],
  ),
  child: Container(
    width: double.infinity,
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          color: Colors.grey.shade900.withOpacity(.4),
        ),
      ],
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          decoration: BoxDecoration(
            color: Colors.grey.shade200,
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(20),
              bottomRight: Radius.circular(20),
            ),
          ),
          child: LayoutBuilder(
            builder: (context, constraints) {
              return ConsumoDetailPanel(
                mesa: widget.mesa,
                store: store,
                maxWidth: constraints.maxWidth,
              );
            },
          ),
        ),
        store.isExpanded
            ? Expanded(
                child: InkWell(
                  splashColor: Colors.grey.shade200,
                  highlightColor: Colors.grey.shade200,
                  onTap: () => store.toggleIsExpanded(false),
                ),
              )
            : SizedBox.shrink(),
      ],
    ),
  ),
)

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