Flutter开发：如何在auto_route中禁用页面导航动画

有三种常用方式可以实现禁用页面过渡动画，根据你的需求选择即可：

1. 给单个路由禁用动画 #

在目标路由的AutoRoute配置里添加transitionsBuilder参数，直接返回子组件即可跳过过渡动画：

@AutoRouterConfig(replaceInRouteName: 'Page,Route')
class AppRouter extends $AppRouter {
  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          path: '/',
          page: Dashboard.page,
          children: [
            AutoRoute(
              path: 'posts',
              page: Posts.page,
              children: [
                AutoRoute(path: 'nestedposts', page: NestedPosts.page),
              ],
            ),
            // 给Users路由禁用过渡动画
            AutoRoute(
              path: 'users',
              page: Users.page,
              transitionsBuilder: (context, animation, secondaryAnimation, child) => child,
            ),
          ],
        )
      ];
}

2. 全局禁用所有路由动画 #

如果想让整个App的所有路由跳转都没有过渡动画，可以在AppRouter类里重写transitionsBuilder方法：

@AutoRouterConfig(replaceInRouteName: 'Page,Route')
class AppRouter extends $AppRouter {
  // 全局禁用过渡动画
  @override
  Widget transitionsBuilder(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return child;
  }

  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          path: '/',
          page: Dashboard.page,
          children: [
            AutoRoute(
              path: 'posts',
              page: Posts.page,
              children: [
                AutoRoute(path: 'nestedposts', page: NestedPosts.page),
              ],
            ),
            AutoRoute(path: 'users', page: Users.page),
          ],
        )
      ];
}

3. 手动跳转时临时禁用动画 #

如果只是某次特定的跳转需要禁用动画，可以在调用跳转方法时指定navigationTransition参数为NavigationTransition.none：

// 示例：跳转到Users页面时临时禁用动画
context.pushRoute(UsersRoute(), navigationTransition: NavigationTransition.none);

内容的提问来源于stack exchange，提问作者who-aditya-nawandar