Flutter如何实现页面无动画推入、退出时顶部滑出？

问题出在你只禁用了推入时的动画时长，但PageRouteBuilder默认会把reverseTransitionDuration（退出时的动画时长）和transitionDuration设为相同值，所以退出时也没有动画。要实现「推入无动画，退出时页面从顶部滑到底部」的效果，需要手动指定退出动画时长，并自定义退出动画逻辑：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => MyNewPage(),
    transitionDuration: Duration.zero, // 推入时无动画
    reverseTransitionDuration: const Duration(milliseconds: 300), // 退出时动画时长
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 定义退出时的动画：从当前位置向下滑出屏幕
      final slideOutAnimation = Tween<Offset>(
        begin: Offset.zero,
        end: const Offset(0, 1),
      ).animate(animation);
      
      return SlideTransition(
        position: slideOutAnimation,
        child: child,
      );
    },
  ),
);

关键说明 #

• transitionDuration: Duration.zero：确保推入新页面时没有过渡动画，直接显示。
• reverseTransitionDuration：单独指定退出时的动画时长，这里设为300ms（可根据需求调整）。
• transitionsBuilder：自定义退出动画逻辑，使用SlideTransition让页面从当前位置向下滑出（Offset(0,1)代表向下移动一个屏幕高度）。

此时调用Navigator.pop(context)，新页面就会以从顶部滑到底部的动画退出。

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