CODEWITHSUNDEEP
fluttergorouter
Jonas
Jonas

Reputation: 7885

GoRouter: Refresh on page looses Back Button

I have a home screen and a detail page. When I navigate to the detail page, Flutter automatically adds a back button in the AppBar that when clicked, goes back to the previous page.

Now using GoRouter, the UrlPathStrategy.path allows that my detail page is at /detail and when refreshing the page, it opens the detail page directly. This is all good, however, the problem is, there is no back button after refreshing at /detail.

Is there a concept, such that GoRouter can infer the Navigation stack based on the route and thus when opening the /detail page, show a back button that leads to / (home page)?

My current routes look something like this:

routes: [
  GoRoute(
    name: "detail",
    path: "/detail",
    builder: (context, state) => DetailPage(),
  ),
  GoRoute(
    name: "home",
    path: "/",
    builder: (context, state) => HomePage(),
  ),
],

Upvotes: 4

Views: 3988

Answers (3)

Ray Han
Ray Han

Reputation: 1

I think Frank has the proper answer.

Probably just put detail route inside home route?


routes: [
  GoRoute(
    name: "home",
    path: "/",
    builder: (context, state) => HomePage(),
    routes: [
      GoRoute(
        name: "detail",
        path: "/detail",
        builder: (context, state) => DetailPage(),
      ),
    ],
  ),
],

In addition to this, for routes that need to be reached by multiple pages, you could define a new router under that parent route. In this case, DetailPage() can be accessed by context.go() from both home and check-detail. The back button would work as intended.

Note: the name of the route has to be different because it serves as an id of the route.

routes: [
  GoRoute(
    name: "home",
    path: "/",
    builder: (context, state) => HomePage(),
    routes: <RouteBase>[
      GoRoute(
        name: "detail",
        path: "detail",
        builder: (context, state) => DetailPage(),
      ),
      GoRoute(
        name: "check-detail",
        path: "check-detail",
        builder: (context, state) => CheckDetailPage(),
        routes: <RouteBase>[
          GoRoute(
            name: "check-detail-detail",
            path: "check-detail-detail",
            builder: (context, state) => DetailPage(),
          ),
        ],
       ),
    ],
  ),
],

Upvotes: 0

test cloud
test cloud

Reputation: 1

Since you are on the page that you know you can just use the go_router pushReplacement instead of the refresh

the following is from the router.dart

  /// Replaces the top-most page of the page stack with the given URL location
  /// w/ optional query parameters, e.g. `/family/f2/person/p1?color=blue`.
  ///
  /// See also:
  /// * [go] which navigates to the location.
  /// * [push] which pushes the location onto the page stack.
  void pushReplacement(String location, {Object? extra}) {
    routeInformationParser
        .parseRouteInformationWithDependencies(
      RouteInformation(location: location, state: extra),
      // TODO(chunhtai): avoid accessing the context directly through global key.
      // https://github.com/flutter/flutter/issues/99112
      _routerDelegate.navigatorKey.currentContext!,
    )
        .then<void>((RouteMatchList matchList) {
      routerDelegate.pushReplacement(matchList);
    });
  }

It works just great :)

Upvotes: 0

Faruk
Faruk

Reputation: 5821

Probably just put detail route inside home route?

routes: [
  GoRoute(
    name: "home",
    path: "/",
    builder: (context, state) => HomePage(),
    routes: [
      GoRoute(
        name: "detail",
        path: "/detail",
        builder: (context, state) => DetailPage(),
      ),
    ],
  ),
],

Upvotes: 4

Related Questions