📱
【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。
auto_route導入後に問題発生
いざ導入したものの、開発中にHot ReloadやHot Restartが効かず画面が真っ白になる現象が出て困ることになった。
問題発生時のコード
void main() {
runApp(const AppRoot());
}
class AppRoot extends StatelessWidget {
const AppRoot({Key? key}) : super(key: key);
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();
Widget build(BuildContext context) {
return MaterialApp.router(
routeInformationParser: _rootRouter.defaultRouteParser(),
routerDelegate: _rootRouter.delegate(),
);
}
}
Discussion