Flutter中如何从其他方向将新页面推入页面栈

确实可以通过继承MaterialPageRoute并重写特定方法来实现，这种方式比PageRouteBuilder更简洁，能复用MaterialPageRoute的默认行为（比如侧滑返回手势），仅修改动画方向。

具体实现步骤 #

1. 自定义一个继承自MaterialPageRoute的路由类，重写buildTransitions方法——这个方法负责控制页面切换的动画逻辑。
2. 在buildTransitions中替换默认的滑动方向，将新页面的初始位置设为屏幕左侧，动画到屏幕中心。

代码示例 #

自定义路由类

class LeftToRightMaterialPageRoute<T> extends MaterialPageRoute<T> {
  LeftToRightMaterialPageRoute({
    required WidgetBuilder builder,
    RouteSettings? settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  }) : super(
          builder: builder,
          settings: settings,
          maintainState: maintainState,
          fullscreenDialog: fullscreenDialog,
        );

  @override
  Widget buildTransitions(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    // 针对安卓平台使用自定义左滑入动画，iOS可保留默认动画（也可按需修改）
    if (Theme.of(context).platform == TargetPlatform.android) {
      return SlideTransition(
        position: Tween<Offset>(
          begin: const Offset(-1.0, 0.0), // 初始位置在屏幕左侧
          end: Offset.zero, // 最终位置在屏幕内
        ).animate(animation),
        child: child,
      );
    }
    return super.buildTransitions(context, animation, secondaryAnimation, child);
  }
}

使用自定义路由

Navigator.of(context).push(
  LeftToRightMaterialPageRoute(
    builder: (context) => const NewItem(),
  ),
);

说明 #

• 该方案保留了MaterialPageRoute的所有原生特性，比如页面状态维护、全屏弹窗标记等，无需额外配置。
• 如果需要适配iOS平台的自定义动画，只需修改if分支外的逻辑，替换为对应的滑动方向即可。

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