Flutter auto_route中CustomRoute丢失iOS原生返回手势问题求助

核心原因 #

直接使用CustomRoute会默认覆盖iOS端的CupertinoPageRoute配置，导致原生滑动返回手势失效——因为CustomRoute默认基于MaterialPageRoute的逻辑构建，不包含iOS原生手势支持。

解决方案 #

在自定义转场的CustomRoute中添加useCupertinoPageRoute: true配置，让iOS端基于CupertinoPageRoute构建路由，既保留原生滑动返回手势，又能应用自定义转场动画。

具体代码实现

1. 路由定义中配置CustomRoute

CustomRoute(
  page: YourTargetPage, // 需要自定义转场的页面
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    // 自定义fadeIn转场动画
    return FadeTransition(
      opacity: animation.drive(
        Tween(begin: 0.0, end: 1.0).chain(CurveTween(curve: Curves.easeIn)),
      ),
      child: child,
    );
  },
  duration: const Duration(milliseconds: 300),
  // 关键配置：启用iOS原生路由的手势支持
  useCupertinoPageRoute: true,
)

2. 保持全局默认路由配置
   在AppRouter中保留原有的自适应路由配置，不影响其他页面的默认转场逻辑：

@override
RouteType get defaultRouteType => RouteType.adaptive(
      ios: RouteType.adaptive(),
      android: RouteType.custom(
        transitionsBuilder: slideLeftWithFade, // Android端自定义转场
        duration: const Duration(milliseconds: 300),
      ),
    );

额外说明 #

• 开启useCupertinoPageRoute: true后，iOS端滑动返回手势自动生效：push页面时使用你定义的自定义转场，手势触发pop时自动调用iOS原生的前页渐显动画，代码触发pop时则使用自定义转场的反向动画（如fadeIn对应fadeOut）。
• 如果需要更精细控制滑动返回时的动画，可以在transitionsBuilder中通过secondaryAnimation参数叠加原生效果。

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