getx
getx copied to clipboard
jonataslaw
[Flutter web] Hot Reload removes all routes except the current
Describe the bug If i use Get.toNamed() to navigate to other pages and do a hot reload all other pages get lost except the current page. Therefore if i try to navigate back (after a hot reload) i get to an empty page. Also if i use a controller of a previous page i get a null error after hot reloading. But if i use Navigator.pushNamed() and do a hot reload, my pages are still there and i can navigate back.
Reproduction code NOTE: THIS IS MANDATORY, IF YOUR ISSUE DOES NOT CONTAIN IT, IT WILL BE CLOSED PRELIMINARY)
example:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(GetMyApp());
// runApp(MyApp());
print("app started");
}
// ----------------------------------------------------------------------------
// navigation with flutters Navigator.pushNamed(...)
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
routes: {
"/": (_) => LoginPage(),
"/register": (_) => RegisterPage(),
},
initialRoute: "/",
navigatorObservers: [
MyNavigatorObserver(),
],
);
}
}
class MyNavigatorObserver extends NavigatorObserver {
@override
void didPush(Route<dynamic> route, Route<dynamic> previousRoute) {
print("navigated to: ${route.settings.name}");
}
}
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("login"),
),
body: Center(
child: RaisedButton(
child: Text("register"),
onPressed: () => Navigator.pushNamed(context, "/register"),
),
),
);
}
}
class RegisterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("register"),
),
body: Center(
child: RaisedButton(
child: Text("back"),
onPressed: () => Navigator.pop(context),
),
),
);
}
}
// ----------------------------------------------------------------------------
// navigation with gets Get.toNamed(...)
class GetMyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Get Demo',
getPages: [
GetPage(
name: "/",
page: () => GetLoginPage(),
),
GetPage(
name: "/register",
page: () => GetRegisterPage(),
),
],
initialRoute: "/",
navigatorObservers: [
MyNavigatorObserver(),
],
);
}
}
class GetLoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("login"),
),
body: Center(
child: RaisedButton(
child: Text("register"),
onPressed: () => Get.toNamed("/register"),
),
),
);
}
}
class GetRegisterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("register"),
),
body: Center(
child: RaisedButton(
child: Text("back"),
onPressed: () => Get.back(),
),
),
);
}
}
To Reproduce Steps to reproduce the behavior:
- Run app on google chrome
- Click on 'register'
- Hot reload
- Click on 'back'
Expected behavior If i navigate through some routes and hot reload my app, i should be able to go back to a previous route, like with flutters navigator.
Flutter Version: Flutter 1.24.0-10.2.pre • channel beta
Getx Version: 3.21.2
Describe on which device you found the bug: Google Chrome Version 87.0.4280.66
Minimal reproduce code
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(GetMyApp());
}
class GetMyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Get Demo',
getPages: [
GetPage(
name: "/",
page: () => GetLoginPage(),
),
GetPage(
name: "/register",
page: () => GetRegisterPage(),
),
],
initialRoute: "/",
navigatorObservers: [
MyNavigatorObserver(),
],
);
}
}
class GetLoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("login"),
),
body: Center(
child: RaisedButton(
child: Text("register"),
onPressed: () => Get.toNamed("/register"),
),
),
);
}
}
class GetRegisterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("register"),
),
body: Center(
child: RaisedButton(
child: Text("back"),
onPressed: () => Get.back(),
),
),
);
}
}
Unfortunately this is a recurring problem with Flutter web, all variables are cleared in the hotreload (not just those related to navigation), and for this reason their controllers are being destroyed. We could implement some feature to get around this in the routes, easily, but it would still affect controllers. You can see the related problem here:
https://github.com/flutter/flutter/issues/59277
But if i use Navigator.pushNamed and MaterialApp the navigation stack does not get lost (see example). On hot reload, all pages get pushed on the stack again (you can see it in the console). If GetMaterialApp with Get.toNamed had the same behavior it could solve my problem. i am using bindings, so pushing the previous routes would create the controllers again.
I am also facing the same issue, on the refresh screen from the chrome web browser, it removes the controller.
Same, GetX needs this feature to fully support the web, else the refresh button causes a mess because it causes the app to hot reload. Also, the navigation stack is messed up if you click the browser's forward button after refreshing.
