Flutter如何将底部滑入对话框改为居中淡入缩放效果（仿Instagram）

原代码实现了从底部滑入的对话框，现在需要调整为从屏幕中心以**淡入（FadeIn）+ 缩放（ZoomIn）**的方式呈现，效果匹配Instagram的覆盖层样式。

原代码：

showGeneralDialog(
  barrierLabel: 'label',
  barrierDismissible: true,
  barrierColor: Colors.black.withOpacity(0.5),
  transitionDuration: const Duration(milliseconds: 200),
  context: context,
  pageBuilder: (context, anim1, anim2) {
    return const NotificationSheet();
  },
  transitionBuilder: (context, anim1, anim2, child) {
    return FadeTransition(
      opacity: CurvedAnimation(parent: anim1, curve: Curves.easeOut),
      child: SlideTransition(
        position: Tween(begin: const Offset(0, 0.1), end: const Offset(0, 0)).animate(anim1),
        child: child,
      ),
    );
  },
);

修改后的代码 #

直接替换transitionBuilder里的SlideTransition为ScaleTransition，并调整动画参数即可实现需求：

showGeneralDialog(
  barrierLabel: 'label',
  barrierDismissible: true,
  barrierColor: Colors.black.withOpacity(0.5),
  // 可选：延长动画时长让过渡更自然
  transitionDuration: const Duration(milliseconds: 300),
  context: context,
  pageBuilder: (context, anim1, anim2) {
    return const NotificationSheet();
  },
  transitionBuilder: (context, anim1, anim2, child) {
    return FadeTransition(
      // 保留淡入动画
      opacity: CurvedAnimation(parent: anim1, curve: Curves.easeOut),
      // 用ScaleTransition实现缩放效果
      child: ScaleTransition(
        scale: Tween(begin: 0.8, end: 1.0).animate(
          // easeOutBack曲线带来轻微回弹，更贴近Instagram的交互感
          CurvedAnimation(parent: anim1, curve: Curves.easeOutBack),
        ),
        child: child,
      ),
    );
  },
);

关键修改说明 #

• 移除原有的SlideTransition，改用ScaleTransition实现从缩小到原尺寸的缩放动画
• 缩放初始值设为0.8（对话框从80%大小开始），结束值为1.0（恢复原始尺寸）
• 动画曲线选用Curves.easeOutBack，会在缩放结束时添加轻微回弹效果，增强交互质感；若不需要回弹，可换回Curves.easeOut
• 可选调整transitionDuration至300ms，让动画过渡更流畅自然

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