Hi reader, today I want to show you how I work with GoRouter. GoRouter is a Flutter library currently maintained by the Flutter team. It can simplify our navigation.

Imagine you have an application that requires the user to activate an account before using it. After the user is activated, if they go to the detail screen and don't touch their screen for about 30 seconds, you need to display a PIN screen to protect their information. After the user inputs the PIN, you show the screen they previously left. But if the user ignores the PIN and presses back, you need to navigate back to the home screen and clear all route history. Quite a lot, right? Let's see how we solve this in our project.

Add GoRouter

To use GoRouter you need to add the go_router package into your pubspec.yaml like below

yaml
dependencies:
  go_router: ^6.2.0 # or latest version

After that, you must run the pub get command to pull down the dependency

bash
flutter pub get

Now it's time to start using GoRouter in our project.

Firstly, you need to declare a GoRouter object that defines where your project can route.

dart
final router = GoRouter(
  routes: [
    GoRoute(
      path: "/",
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: "/details",
      builder: (context, state) => const DetailPage(),
    ),
  ],
);

Now that you have 2 routes, you can navigate between them. Then, add that route to the MaterialApp.router in the main.dart file.

dart
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'App',
      // Add router here
      routerConfig: router,
    );
  }
}

To navigate the screen, just call an extension function provided by the GoRouter. Below is how to push the screen.

dart
context.push("details");

Or pop the screen using

dart
context.pop();

It's simple, right? Now let's dig in.

Now, we want to show a dialog on the project detail screen with a password if the user doesn't touch the screen for some time.

Just like a normal dialog, we display it as shown below when the time arrives.

dart
final controller = TextEditingController();

showDialog(
  context: context,
  // to prevent dismiss while touching outside dialog
  barrierDismissible: false,
  builder: (context) => Material(
    color: Colors.white,
    child: WillPopScope(
      // to prevent diadialog dismiss form system back button
      onWillPop: () async => false,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text("Input pin here"),
          TextFormField(
            controller: controller,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  // TODO()
                },
                child: const Text("Cancel"),
              ),
              ElevatedButton(
                onPressed: () {
                  // TODO()
                },
                child: const Text("Ok"),
              ),
            ],
          ),
        ],
      ),
    ),
  ),
);

This way, this dialog will remain on screen with no way to exit.

So now we start to implement the logic to dismiss our dialog and move the user to the previous screen and if you click on cancel just move the user back to the home screen instead.

How to achieve this

GoRouter is useful when you're within the same context or widget tree. However, since this is a dialog, you can't access GoRouter directly.

The solution is very simple: you manipulate the dialog as you would with a normal Navigator object and then call GoRouter to navigate to the screen behind it.

Here is a sample of the Cancel button

dart
ElevatedButton(
  onPressed: () {
      // Close dialog
      Navigator.of(context).pop();
      // Use GoRouter to navigate to home page
      context.go("/");
  },
  child: const Text("Cancel"),
),

Here is a sample code for the OK button:

dart
ElevatedButton(
  onPressed: () {
      // Check what ever logic
      if (controller.text == "123") {
          // Call pop the dialog.
          // This way you still stay at
          // where you leave previously
          Navigator.of(context).pop();
      }
  },
  child: const Text("Ok"),
),

Conclusions

Working with GoRouter helps simplify page navigation. Without it, you would have a hard time keeping references to the navigator key and the BuildContext.

Final words

This is the very first article I've written, so I don't expect it to be perfect. However, if you find it helpful, I'll be proud to have assisted you. Goodbye for now; see you in the next article, which will discuss GoRouter with ShellRoute.