DEV Community

Flutter Web - Fix Refresh & Back button Problem

swimmingkiim on April 24, 2022

Update Notice!!! The explaination below is somewhat outdated. Now, I recommends you to use go_router, a routing package using Flutter ...

Read full post

ParkJuneWoo • Jun 15 '22

Hello!! This article was really helpful! Thank you
But how did you handle it like Get.back()? An error occurs in this process. Same as Get.rootDelegate.popRoute().

I would ultimately like to implement the following elements.

Go back, go forward after refresh in a web browser. -> Success
Widgets that return to the previous page when the <- button is pressed (previously use Get.back())

swimmingkiim • Jun 16 '22

You can do that by using Get.roodDelegate.popHistory with custom logic.

First, override popHistory method in AppRouterDelegate

class AppRouterDelegate extends GetDelegate {
  GetNavConfig get prevRoute =>  // here
      history.length < 2 ? history.last : history[history.length - 2];

  @override
  Future<GetNavConfig> popHistory() async {  // and here
    final result = prevRoute;
    Get.rootDelegate.offNamed(prevRoute.currentPage!.name);
    return result;
  }

  @override
  Widget build(BuildContext context) {
    return Navigator(
      ......
    );
  }
}

And call it like this

Get.rootDelegate.popHistory();

I've tested it and it works for me. Hope this can help you :-)

ParkJuneWoo • Jun 17 '22

Thank you!! That was really helpful

If you refresh it, it doesn't work popHistory, but I think we can solve it in a different way!

shambhulky • Jul 13 '23 • Edited

How you have implemented this? Even without overriding, getting same result.

Jiun Kim • Jun 24 '22 • Edited

Hello!
We can go back via html API, dart:html

// import
import 'dart:html' as html;

{
  // within callBack
  // ..
  html.window.history.back();
}

Thanks!
HANW!

Jiun Kim • Jun 24 '22

Helloo Buddies~

Paul Lam • Jun 27 '22

Hi, thanks for the article. I tested the code and found out the browser back history did not really get back to the previous page state. For example when i scroll to certain location and navigate back again, instead of getting back new page was loaded. Is there any way we can preserve the page state using your code?

swimmingkiim • Jun 27 '22

Yes, I also found some issue of that approach. As of now, the simplest way to solve this problem is using @kkimj 's method. ( window.history.back()) If you want to manually manage your history stack, then check out pushHistory method in Delegete class. Maybe you can cache those records and write your own back method logic.

disterbia • Aug 19 '22

when i did it your way on the flutter web, Get.rootDelegate.toNamed("/") works, but Get.rootDelegate.offToNamed("/") throws an Unexpected null value error. I think there is an error related to the key, but I can't figure it out.
Also Get.snackbar() throws the same error.

Safvan Puthalath • Oct 26 '23

class AppRouterDelegate extends GetDelegate {
@override
Widget build(BuildContext context) {
return Navigator(
key: Get.key, //Please add this line to get snackbar,dialog,etc.
onPopPage: (route, result) => route.didPop(result),
pages: currentConfiguration != null
? [currentConfiguration!.currentPage!]
: [GetNavConfig.fromRoute(Routes.HOME)!.currentPage!],
);
}
}

disterbia • Aug 19 '22

stackoverflow.com/questions/734005...

verrelravanelli • Apr 10 '23

Hey, i tried to open your stackoverflow link but its say already removed. Do you already find the solution for this problem? Thanks

iManYarahmadi • Feb 21 '23

hi my friends i use this article for my app route but im using this code on flutter web and when refresh or back,forward button in browser clicked nothing happend in my app.. how can handle this ?
my code like this

class AppRouterDelegate extends GetDelegate {
GetNavConfig get prevRoute => // here
history.length < 2 ? history.last : history[history.length - 2];

@override
Future popHistory() async {
// and here
final result = prevRoute;
Get.rootDelegate.offNamed(prevRoute.currentPage!.name);
return result;
}

@override
Widget build(BuildContext context) {
GlobalKey mainNavigatorKey = GlobalKey();

return Navigator(
  key: mainNavigatorKey,
  onPopPage: (route, result) => route.didPop(result),
  pages: currentConfiguration != null
      ? [currentConfiguration!.currentPage!]
      : [GetNavConfig.fromRoute(Routes.LOGIN)!.currentPage!],
);

}
}

woywie87 • Dec 27 '23

Hi, It was very helpful. But I realized that with this fix, WillPopScope widget (or new PopScope) don't work (Flutter Web)
Case like this:

Go to new page by "Get.rootDelegate.toNamed(Routes.SecondPage)"
Press back button - onWillPop in SecondPage method never fired :/

huho • Mar 15 '23

@swimmingkiim why you recommend to user go_router?

Mohamed Elbendary • Dec 8 '22 • Edited

Hello !! the solution of overriding popHistory() not working, I can't go back to the previous page on mobile, is there any solution can handle it like Get.back() but in navigator 2.0

Kyo • Oct 16 '23

Hello, how do I make Getx compatible with Go router? My project depends heavily on GetX. How can I quickly migrate to go router

Raj Vaghasiya • Jan 12

have you found any solution?
i have same problem. please let me know

SuiSui • Apr 13

Yes, you can mix GetX pages and GoRouter.
Like this sample.

Future<void> main() async {
  usePathUrlStrategy();
  GoRouter.optionURLReflectsImperativeAPIs = true;
  var router = GoRouter(navigatorKey: Get.key, initialLocation: '/', routes: [
    GoRoute(
      name: 'home',
      path: '/',
      builder: (context, state) => YourHomePage(),
    ),
    GoRoute(
      name: 'page2',
      path: '/page2',
      builder: (context, state) => YourPage2(),
    )
  ]);

  runApp(GetMaterialApp.router(
    debugShowCheckedModeBanner: false,
    routeInformationParser: router.routeInformationParser,
    routerDelegate: router.routerDelegate,
    routeInformationProvider: router.routeInformationProvider,
    builder: (BuildContext context, Widget? child) {
      return child ?? Container();
    },
  ));
}
.
.
.
.
.
static toPage2() {
    BuildContext? context = Get.context;
    if(context==null) return;
    context.pushNamed('page2');
  }

shambhulky • Jul 13 '23

How to logout ? After logout, still going to previous page on back press.
How to go home from login so that login page will not open when we press back button ?

Ravi Patel • Feb 10 '23

Try with arguments. It's not working. As it use root where no arguments are passed.

danhquyen0109 • Aug 15 '23

You can try:

Get.rootDelegate.arguments()