How do you go back via the browser button on Flutter web with GoRouter navigation?

Question

I'm testing out Flutter Web a little bit and using GoRouter for navigation. Everything works fine when I click on a navigation Item, but when I click back, the web address correctly changes, but the corresponding page doesn't appear. For example:

My routes are fairly straightforward, for example here are some from my routes.dart file. I use a routerProvider that I later call in the main app.

final key = GlobalKey<NavigatorState>();

final routerProvider = Provider<GoRouter>((ref) {
  final authState = ref.watch(authStateProvider);

  return GoRouter(
    navigatorKey: key,

    debugLogDiagnostics: true,
    initialLocation: PreLoginHome.routeLocation,

    routes: [
      GoRoute(
        path: SplashPage.routeLocation,
        name: SplashPage.routeName,
        builder: (context, state) {
          return const SplashPage();
        },
      ),
      GoRoute(
        path: PreLoginHome.routeLocation,
        name: PreLoginHome.routeName,
        builder: (context, state) {
          return const PreLoginHome();
        },
      ),

class MyAppWithFirebase extends ConsumerWidget {
  const MyAppWithFirebase({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final router = ref.watch(routerProvider);
    return MaterialApp.router(
      theme: CustomTheme.darkTheme,
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
      routeInformationProvider: router.routeInformationProvider,
    );
  }
}

And when a nav item is clicked on, I use the provider to call the go method from GoRouter. I don't want to use push because that adds a back button in the appbar which I don't want because this is a webapp. This padding widgets are within a custom appbar I made.

 Padding(
          padding: const EdgeInsets.fromLTRB(0, 0, 25, 0),
          child: TextButton(
              onPressed: isUserSignedIn
                  ? () => ref.read(routerProvider).go(Dashboard.routeLocation)
                  : () =>
                      ref.read(routerProvider).go(PreLoginHome.routeLocation),
              child: isUserSignedIn
                  ? const Text('Dashboard')
                  : const Text('Home')),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(0, 0, 25, 0),
          child: isUserSignedIn
              ? const ProblemsDropDownButton()
              : TextButton(
                  onPressed: isUserSignedIn
                      ? () => ref.read(routerProvider).go('/flashcard_solve')
                      : (() => ref.read(routerProvider).go('/about')),
                  child: isUserSignedIn
                      ? const Text('Problems')
                      : const Text('About')),
        ),

``

This post has an explanation, but he updated it to just say use GoRouter. Now that GoRouter is an offical package of Flutter, they don't have that awesome documentation site that they had before. Would putting a WillPopScope widget on every page work?

Please let me know if there's any other code you need to see.

just use `GoRouter.of(context).push()` :) – Sajjad Jan 25 '23 at 19:22 — Sajjad, Jan 25 '23 at 19:22

krishnaacharyaa · Answer 1 · 2023-01-26T02:05:07.677

Solution

Change all the occurences of

 ref.read(routerProvider).go()

to

 ref.read(routerProvider).push()

Explanation

go()

This is used to replace the page with the present page, so you cannot use the back button

push()

This is used to push the page to the Navigation Stack, so now you can use the back button.

Extra

Its mentioned in the official docs:

GoRouter can push a screen onto the Navigator's history stack using context.push(), and can pop the current screen via context.pop(). However, imperative navigation is known to cause issues with the browser history.

To learn more, see issue #99112.