【Flutter】auto_routeを導入した際、Hot ReloadやHot Restartが効かなくなった問題

動作確認環境

Flutter 2.2.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f4abaa0735 (5 weeks ago) • 2021-07-01 12:46:11 -0700
Engine • revision 241c87ad80
Tools • Dart 2.13.4

auto_route

FlutterでRouterとして人気あるauto_route。
https://pub.dev/packages/auto_route

auto_route導入後に問題発生

いざ導入したものの、開発中にHot ReloadやHot Restartが効かず画面が真っ白になる現象が出て困ることになった。

問題発生時のコード

void main() {
  runApp(const AppRoot());
}

class AppRoot extends StatelessWidget {
  const AppRoot({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _rootRouter = RootRouter();
    return MaterialApp.router(
      routeInformationParser: _rootRouter.defaultRouteParser(),
      routerDelegate: _rootRouter.delegate(),
    );
  }
}

解決

• RootRouterのinstanceを保持するところが間違っている

build内にprint(_rootRouter.hashCode)を書いて動作を見るとわかるが、Hot ReloadやHot Restartでbuild処理が再度走る。その時、表示に使っている_rootRouterに新しいinstaceが上書きされてしまい、表示中の画面が消えるため真っ白になるみたい。

問題解決後のコード

void main() {
  runApp(AppRoot());
}

class AppRoot extends StatelessWidget {
  AppRoot({Key? key}) : super(key: key);

  final _rootRouter = RootRouter();

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