{"id":27217,"date":"2024-03-21T05:00:00","date_gmt":"2024-03-21T04:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=27217"},"modified":"2024-07-22T14:11:18","modified_gmt":"2024-07-22T12:11:18","slug":"migration-to-go_router-devs-story","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/en\/migration-to-go_router-devs-story\/","title":{"rendered":"Migration to go_router\u200a\u2014\u200adev\u2019s\u00a0story"},"content":{"rendered":"\n

Our client always wanted to have deeplinks provided by push notifications. We developed navigation in the client\u2019s app using Navigator\u2019s methods, such as pop\/push\/pushReplacement, etc. We even created simple deeplink handling with a\u00a0.popUntil() solution that allowed us to open specific tabs from Bottom Navigation. But we decided to wait until Google chooses one of 3 libraries to help devs implement Navigator 2.0, which supports deeplinks.<\/p>\n\n\n\n

\"go_router<\/a>
Fig. 1 go_router 7.1.1<\/figcaption><\/figure>\n\n\n\n

At the end of 2021, Google chose 3 libraries to support Navigator 2.0: beamer, vroute, and autoroute, and did deep research on which one should be supported<\/a>.<\/p>\n\n\n\n

But then suddenly, they changed their mind and took go_router as an officially supported package. Many disappointed devs even created some Reddit threads to discuss this subject. So, should you migrate to go_router? <\/p>\n\n\n\n

I will not answer that question, but I will try to show you why we decided to do that<\/strong> and how we handled cases where go_router made us trouble. Let\u2019s start!<\/p>\n\n\n\n

Basics\/Research<\/strong><\/h2>\n\n\n\n

Like always, before doing anything, we decided to do some research. Our Architect asked go_router\u2019s team directly about our app use cases, and we decided to wait until go_router 5.0 was available, which would solve all basic problems. So, we started with version 5.0.0, but before we added any code to the client app, we developed a PoC project to test all cases to see if they could handle.<\/p>\n\n\n\n

Deeplink support<\/h2>\n\n\n\n

go_router supports deeplinks out of the box; we should only enable them on Android\/iOS following the instructions<\/a>. For Android, we can test deeplinks using adb commands:<\/p>\n\n\n

\nadb shell 'am start -a android.intent.action.VIEW I will schedule some time for us to connect.\n    -c android.intent.category.BROWSABLE Thank you for reaching out.\n    -d "http:\/\/&lt;web-domain>\/details"' I will schedule some time for us to connect.\n    &lt;package name>\n<\/pre><\/div>\n\n\n
Note!<\/strong> There are some problems with passing more than one argument to deeplinks on the Windows terminal because of encoding. To avoid this issue, you can use f.e. Git Bash terminal. Or using any supportive apps from Google Play<\/a>. For iOS we just used build-in notepad with pasted deeplinks.<\/p>\n\n\n\n
Nested bottom navigation<\/strong><\/h2>\n\n\n\n
We had to rewrite our bottom navigation from scratch based on the example provided by GitHub<\/a>.\u00a0

It uses ShellRoute to create a new Navigator, which displays any matching sub-routes instead of placing them on the root Navigator.
However, a<\/strong> few days ago, the go_router team published a new version of go_router v.7.1.0, which supports StatefulShellRoute.<\/p>\n\n\n\n
\"StatefulShellRoute\"
Fig. 2 StatefulShellRoute<\/figcaption><\/figure>\n\n\n\n
This is a game-changer for preserving the state in the app\u2019s navigation. Many people have been waiting for this for a long time<\/a>.<\/p>\n\n\n\n
It is easy to use:<\/p>\n\n\n
\nfinal GoRouter _router = GoRouter(\n    navigatorKey: _rootNavigatorKey,\n    initialLocation: '\/a',\n    routes: &lt;RouteBase>[\n      StatefulShellRoute(\n        builder: (BuildContext context, GoRouterState state,\n            StatefulNavigationShell navigationShell) {\n          \/\/ This nested StatefulShellRoute demonstrates the use of a\n          \/\/ custom container for the branch Navigators. In this implementation,\n          \/\/ no customization is done in the builder function (navigationShell\n          \/\/ itself is simply used as the Widget for the route). Instead, the\n          \/\/ navigatorContainerBuilder function below is provided to\n          \/\/ customize the container for the branch Navigators.\n          return navigationShell;\n        },\n        navigatorContainerBuilder: (BuildContext context,\n            StatefulNavigationShell navigationShell, List&lt;Widget> children) {\n          \/\/ Returning a customized container for the branch\n          \/\/ Navigators (i.e. the `List&lt;Widget> children` argument).\n          \/\/\n          \/\/ See ScaffoldWithNavBar for more details on how the children\n          \/\/ are managed (using AnimatedBranchContainer).\n          return ScaffoldWithNavBar(\n              navigationShell: navigationShell, children: children);\n        },\n        branches: &lt;StatefulShellBranch>[\n          \/\/ The route branch for the first tab of the bottom navigation bar.\n          StatefulShellBranch(\n            navigatorKey: _tabANavigatorKey,\n            routes: &lt;RouteBase>[\n              GoRoute(\n                \/\/ The screen to display as the root in the first tab of the\n                \/\/ bottom navigation bar.\n                path: '\/a',\n                builder: (BuildContext context, GoRouterState state) =>\n                    const RootScreenA(),\n                routes: &lt;RouteBase>[\n                  \/\/ The details screen to display stacked on navigator of the\n                  \/\/ first tab. This will cover screen A but not the application\n                  \/\/ shell (bottom navigation bar).\n                  GoRoute(\n                    path: 'details',\n                    builder: (BuildContext context, GoRouterState state) =>\n                        const DetailsScreen(label: 'A'),\n                  ),\n                ],\n              ),\n            ],\n          ),\n\n          \/\/ The route branch for the third tab of the bottom navigation bar.\n          StatefulShellBranch(\n            \/\/ StatefulShellBranch will automatically use the first descendant\n            \/\/ GoRoute as the initial location of the branch. If another route\n            \/\/ is desired, specify the location of it using the defaultLocation\n            \/\/ parameter.\n            \/\/ defaultLocation: '\/c2',\n            routes: &lt;RouteBase>[\n              StatefulShellRoute(\n                builder: (BuildContext context, GoRouterState state,\n                    StatefulNavigationShell navigationShell) {\n                  \/\/ Just like with the top level StatefulShellRoute, no\n                  \/\/ customization is done in the builder function.\n                  return navigationShell;\n                },\n                navigatorContainerBuilder: (BuildContext context,\n                    StatefulNavigationShell navigationShell,\n                    List&lt;Widget> children) {\n                  \/\/ Returning a customized container for the branch\n                  \/\/ Navigators (i.e. the `List&lt;Widget> children` argument).\n                  \/\/\n                  \/\/ See TabbedRootScreen for more details on how the children\n                  \/\/ are managed (in a TabBarView).\n                  return TabbedRootScreen(\n                      navigationShell: navigationShell, children: children);\n                },\n                \/\/ This bottom tab uses a nested shell, wrapping sub routes in a\n                \/\/ top TabBar.\n                branches: &lt;StatefulShellBranch>[\n                  StatefulShellBranch(routes: &lt;GoRoute>[\n                    GoRoute(\n                      path: '\/b1',\n                      builder: (BuildContext context, GoRouterState state) =>\n                          const TabScreen(\n                              label: 'B1', detailsPath: '\/b1\/details'),\n                      routes: &lt;RouteBase>[\n                        GoRoute(\n                          path: 'details',\n                          builder:\n                              (BuildContext context, GoRouterState state) =>\n                                  const DetailsScreen(\n                            label: 'B1',\n                            withScaffold: false,\n                          ),\n                        ),\n                      ],\n                    ),\n                  ]),\n                  StatefulShellBranch(routes: &lt;GoRoute>[\n                    GoRoute(\n                      path: '\/b2',\n                      builder: (BuildContext context, GoRouterState state) =>\n                          const TabScreen(\n                              label: 'B2', detailsPath: '\/b2\/details'),\n                      routes: &lt;RouteBase>[\n                        GoRoute(\n                          path: 'details',\n                          builder:\n                              (BuildContext context, GoRouterState state) =>\n                                  const DetailsScreen(\n                            label: 'B2',\n                            withScaffold: false,\n                          ),\n                        ),\n                      ],\n                    ),\n                  ]),\n                ],\n              ),\n            ],\n          ),\n        ],\n      ),\n    ],\n  );\n  \/\/\/ Navigate to the current location of the branch at the provided index when\n  \/\/\/ tapping an item in the BottomNavigationBar.\n  void _onTap(BuildContext context, int index) {\n    \/\/ When navigating to a new branch, it's recommended to use the goBranch\n    \/\/ method, as doing so makes sure the last navigation state of the\n    \/\/ Navigator for the branch is restored.\n    navigationShell.goBranch(\n      index,\n      \/\/ A common pattern when using bottom navigation bars is to support\n      \/\/ navigating to the initial location when tapping the item that is\n      \/\/ already active. This example demonstrates how to support this behavior,\n      \/\/ using the initialLocation parameter of goBranch.\n      initialLocation: index == navigationShell.currentIndex,\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
And works well:<\/p>\n\n\n\n
\"the<\/a>
Fig. 3 The result<\/figcaption><\/figure>\n\n\n\n
We haven\u2019t migrated to it yet, but it will be an improvement in the future.<\/p>\n\n\n\n
\u201clogin\u201d guard<\/strong><\/h3>\n\n\n\n
Previously, we researched a beamer package that won Google\u2019s routing competition. They have a nice feature called guards<\/em>:<\/p>\n\n\n\n
beamer | Flutter Package<\/strong>
beamer.dev Beamer uses the power of Router and implements all the underlying logic for you, letting you explore\u2026<\/em>pub.dev<\/a><\/p>\n\n\n
\nBeamGuard(\n  \/\/ on which path patterns (from incoming routes) to perform the check\n  pathPatterns: ['\/login'],\n  \/\/ perform the check on all patterns that **don't** have a match in pathPatterns\n  guardNonMatching: true,\n  \/\/ return false to redirect\n  check: (context, location) => context.isUserAuthenticated(),\n  \/\/ where to redirect on a false check\n  beamToNamed: (origin, target) => '\/login',\n)\n<\/pre><\/div>\n\n\n
In short, guards will protect access to your app’s pages if, for example, a user is not signed in or signed out. In our case, we needed 2 different types of \u201cguards\u201d in our app. The equivalent of it is called redirect in go_rotuer:<\/p>\n\n\n\n
Redirection topic<\/strong>
Redirection changes the location to a new one based on the application state. For example, redirection can be used to\u2026<\/em>pub.dev<\/a><\/p>\n\n\n\n
To add it, we used 2 parameters:<\/p>\n\n\n\n