使用auto_route时Flutter热重载总是跳回initialRoute求助

核心原因 #

热重载时如果AppRouter实例被重新创建，AutoRoute会重新初始化路由栈并回到initialRoute。若AppRouter是在无状态Widget或main函数中创建的，热重载时会被重建，进而导致当前路由丢失。

解决方案 #

1. 将AppRouter实例保存在StatefulWidget的State中 #

把AppRouter实例放在StatefulWidget的State类内，热重载时State不会被销毁，路由栈就能得到保留：

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late final AppRouter _appRouter;

  @override
  void initState() {
    super.initState();
    _appRouter = AppRouter();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: AutoRouterDelegate(_appRouter),
      routeInformationParser: _appRouter.defaultRouteParser(),
    );
  }
}

2. 用依赖注入维持AppRouter单例 #

如果项目使用依赖注入库（如GetIt），将AppRouter注册为单例，确保整个应用生命周期内使用同一个实例：

// 初始化依赖时
GetIt.I.registerLazySingleton(() => AppRouter());

// 在MyApp中调用
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final appRouter = GetIt.I<AppRouter>();
    return MaterialApp.router(
      routerDelegate: AutoRouterDelegate(appRouter),
      routeInformationParser: appRouter.defaultRouteParser(),
    );
  }
}

3. 移除路由内的强制跳转逻辑 #

检查页面的initState或路由配置中是否存在强制跳转到初始路由的代码，这类代码会在热重载时触发路由重置。如需跳转，需添加判断仅在首次启动时执行：

// 修正后的示例
@override
void initState() {
  super.initState();
  // 仅在页面为栈内第一个路由时执行跳转
  if (ModalRoute.of(context)?.isFirst == true) {
    context.pushRoute(const HomeRoute());
  }
}

4. 重新生成路由代码 #

若使用了auto_route的代码生成功能，执行以下命令重新生成路由代码，避免旧代码引发的异常：

flutter pub run build_runner build --delete-conflicting-outputs

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