如何用Flutter AnimatedSwitcher实现新页面淡入缩放过渡动画

我正在学习如何在Flutter中使用AnimatedSwitcher实现页面间的过渡动画，具体需求是新页面从屏幕中间缓慢淡入，同时逐渐缩放至填满屏幕，透明度随缩放逐渐提高。

我尝试了多段代码，其中这段代码的效果最接近预期，但问题在于当前是旧页面淡出，新页面在背景中淡入，这并非我想要的效果。

相关代码如下：

return AnimatedSwitcher(
          duration: const Duration(milliseconds: 4000),
          transitionBuilder: (widget, animation) {
            return Stack(
              children: [
                FadeTransition(
                  opacity: animation,
                  child: widget,
                ),
                ScaleTransition(
                  scale: animation,
                  filterQuality: FilterQuality.high,
                  child: widget,
                ),
              ],
            );
          },
          switchOutCurve: const Threshold(0),
          child: newWidget,
          //
        );

修正方案 #

要实现新页面从中间缩放淡入、旧页面直接消失的效果，调整方式如下：

1. 修复动画组合逻辑：之前用Stack叠加两个相同Widget的做法会导致渲染异常，应将淡入和缩放动画嵌套，让同一个Widget同时应用两种动画。
2. 确保动画触发条件：切换页面时必须给child设置唯一Key，否则AnimatedSwitcher无法识别子Widget变化，不会触发动画。
3. 调整动画起始参数：缩放动画从0.1（避免完全不可见的起始状态）过渡到1，透明度同步从0到1。

修正后的代码：

return AnimatedSwitcher(
  duration: const Duration(milliseconds: 4000),
  // 旧页面立即消失，不播放退出动画
  switchOutCurve: const Threshold(0),
  transitionBuilder: (widget, animation) {
    // 嵌套组合缩放与淡入动画
    return ScaleTransition(
      scale: Tween<double>(begin: 0.1, end: 1.0).animate(animation),
      child: FadeTransition(
        opacity: animation,
        child: widget,
      ),
    );
  },
  // 关键：给每个页面设置唯一Key，比如根据页面标识生成
  child: newWidget,
);

额外说明 #

• 示例中newWidget需要携带唯一Key，比如Container(key: Key('page-1'), ...)，切换时Key要对应变化。
• 若需要更自然的动画节奏，可以给动画添加曲线，比如：

  scale: Tween<double>(begin: 0.1, end: 1.0).animate(
    CurvedAnimation(parent: animation, curve: Curves.easeInOut)
  ),
  

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