Flutter中AnimatedContainer优化：实现输入框与按钮淡入平滑效果

这里给你几个实用的实现思路，结合你现有代码就能快速调整：

方案1：给 AnimatedContainer 加上透明度动画 #

直接在现有 AnimatedContainer 里新增 opacity 属性，配合宽高变化同步做淡入效果，代码改动最小：

AnimatedContainer(
  duration: Duration(milliseconds: 850),
  curve: Curves.easeInOut, // 可选，加缓动曲线让动画更自然
  width: pressed ? 570 : 250,
  height: pressed ? 280 : 50,
  opacity: pressed ? 1.0 : 0.0, // 新增透明度动画
  child: Column(
    children: [
      // 你的 TextField 和按钮组件
    ],
  ),
)

如果容器缩小时不想让内部组件提前消失，可以把 opacity 的默认值调整为 0.1 保留微弱透明度，或者单独用 AnimatedOpacity 包裹内部组件，分开控制动画时机。

方案2：用 AnimatedSwitcher 实现组件淡入切换 #

把 TextField 和按钮放在 AnimatedSwitcher 里，利用它的过渡动画能力，适合需要完全显示/隐藏组件的场景：

AnimatedContainer(
  duration: Duration(milliseconds: 850),
  width: pressed ? 570 : 250,
  height: pressed ? 280 : 50,
  child: AnimatedSwitcher(
    duration: Duration(milliseconds: 600),
    transitionBuilder: (child, animation) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
    child: pressed ? 
      Column(
        key: UniqueKey(), // 必须加key让AnimatedSwitcher识别组件变化
        children: [TextField(), ElevatedButton(onPressed: (){}, child: Text("提交"))],
      ) : 
      SizedBox.shrink(),
  ),
)

这个方案能让内部组件在容器展开时平滑淡入，收起时淡出，和容器的宽高动画形成配合，视觉更协调。

方案3：自定义组合动画（淡入+上滑） #

如果想要更细腻的效果，比如组件从底部往上滑同时淡入，可以用 TweenAnimationBuilder 同时控制透明度和位置：

TweenAnimationBuilder(
  tween: Tween<double>(begin: 0, end: pressed ? 1 : 0),
  duration: Duration(milliseconds: 850),
  curve: Curves.easeOutCubic,
  builder: (context, value, child) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 850),
      width: pressed ? 570 : 250,
      height: pressed ? 280 : 50,
      child: Opacity(
        opacity: value,
        child: Transform.translate(
          offset: Offset(0, 30 * (1 - value)), // 从底部往上移动30px
          child: Column(
            children: [TextField(), ElevatedButton(onPressed: (){}, child: Text("提交"))],
          ),
        ),
      ),
    );
  },
)

这个方案能让内部组件的动画和容器的宽高变化同步，视觉上更连贯流畅。

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