Navigator overview in Flutter.
Tags: flutter, android, ios, programming
Published: 2022-01-18 15:50:50

If you come from a native Android development background, then you've probably used [**Jetpack Navigation**](https://developer.android.com/guide/navigation?gclid=CjwKCAiAxJSPBhAoEiwAeO_fPzO7PrUke5_f6wXQbOjigiDOL3XZ3ByWPEVNcUDEqkEjMuT5H18ushoCT6oQAvD_BwE&gclsrc=aw.ds) to navigate between Fragments in an application. The same can be said for [**UINavigationController**](https://developer.apple.com/documentation/uikit/uinavigationcontroller) if you come from an iOS background, which defines a stack-based scheme for navigating hierarchical content.

In Flutter, it is accustomed for one to use a [**Navigator**](https://api.flutter.dev/flutter/widgets/Navigator-class.html) widget to manage your screens or pages(which may also be referred to as routes). A **stack** is a data structure that manages pages. You insert the elements last-in, first-out, and only the element at the top of the stack is visible to the user.

There are currently two iterations of Navigation in Flutter: Navigator 1.0 and Navigator 2.0. Before we delve into Navigator 2.0, let's have a quick overview of Navigator 1.0.

![GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xu06ra7yw1mr6zzh588l.gif)

## Overview of Navigator 1.0
Navigator 1.0 provides a simple set of APIs for you to navigate between screens. The most common ones include:

- `push()`: Adds a new route on the stack.
- `pop()`: Removes a route from the stack.

One is able to add Navigator to a Flutter application via the use of [`WidgetsApp`](https://api.flutter.dev/flutter/widgets/WidgetsApp-class.html), which wraps many other common widgets that a Flutter app requires. Among these wrapped widgets is a top-level `Navigator` to manage the pages you push and pop. To get a deeper understanding of how navigation with named routes works, then this [article](https://medium.com/@samuelwahome/navigation-and-named-routes-in-flutter-2d31d0975498) will be of much help.

Using Navigator 1.0 may seem easy enough, but it does have its own disadvantages, which are:

- There's no good way to manage your pages without keeping a mental map of where you push and pop a screen.
- Navigator 1.0 doesn't expose the route stack to developers.
- Navigator 1.0 does not update the web URL path.
- On Android devices, the **Back** button might not work with Navigator 1.0 when you have nested navigators or when you add Flutter to your host Android app.

## Overview of Navigator 2.0
Navigator 2.0 came with Flutter 1.22, which allowed one to take full control of the application's navigation stack. The main goals of this declarative API include but are not limited to:

- **Manage nested navigators:** Gives you control over which navigator has priority.
- **Manage navigation state:** This lets you parse routes and handle web URLs and deep linking.
- **Exposing the navigator's page stack:** One can now manage app pages. 
- **Backward-compatible with imperative API:** One can use both imperative and declarative styles in the same app.
- **Handle operating system events:** Works better with events like the Android system's Back button.

![https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6n0wx3z6hsiaq1l7fop.png)

The above image shows an overview of Navigator 2.0's declarative API. The declarative API includes the following key components:

- **Page:** An abstract class that describes the configuration for a route.
- **Router:** Handles configuring the list of pages the Navigator displays.
- **RouterDelegate:** defines how the router listens for changes to the app state to rebuild the navigator's configuration.
- **RouteInformationProvider:** Provides `RouteInformation` to the router.
- **RouteInformationParser:** Parses route information into a user-defined data type.
- **BackButtonDispatcher:** Reports presses on the platform system's Back button to the router.
- **TransitionDelegate:** Decides how pages transition into and out of the screen.

{% youtube https://www.youtube.com/watch?v=xFFQKvcad3s&t=3158s %}

It is important to note, however, that this post is by no means a nudge towards using a particular navigation option, but only an overview of the two options that are available thus far, hence if you are happy with how the `Navigator` works today, you may keep using it in the same (imperative) way. If you do need any more information on the differences between the two approaches, then this video should be of much help:

{% youtube https://www.youtube.com/watch?v=JmfYeF4gUu0&t=9728s %}

## Navigator 2.0 libraries to check out.
Navigator 2.0 may not be the easiest API to use out there, hence the following are some of the packages out there that wrap around the Navigator 2.0 API to make routing and navigation easier:

### 1. Beamer.
According to the [official documentation](https://pub.dev/packages/beamer):

> Beamer handles your application routing on all platforms, synchronize it with the browser's URL bar, and more. Beamer uses the power of [Router](https://api.flutter.dev/flutter/widgets/Router-class.html) and implements all the underlying logic for you.

Beamer was designed to solve the following two major pain points:
- Make the use of Router API easier, especially for beginners.
- Segregate the responsibility of creating a page stack, for intermediate and advanced usage.

At the highest level, `Beamer` is a wrapper for `Router` and uses its own implementations for `RouterDelegate` and `RouteInformationParser`(`BeamerDelegate` and `BeamerParser`). The goal of Beamer is to separate the responsibility of building a page stack for `Navigator.pages` into multiple classes with different states, instead of one global state for all page stacks.

![Beamer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do6hue5f1nr80b3c5fx7.png)

### 2. go_router.
According to the [official documentation](https://pub.dev/packages/go_router):

> go_router is a declarative router for Flutter based on Navigation 2 supporting deep linking, data-driven routes and more.

The goal of the [go_router](https://pub.dev/packages/go_router) package is to simplify the use of the [Router](https://api.flutter.dev/flutter/widgets/Router-class.html) in Flutter as specified by the [MaterialApp.router](https://api.flutter.dev/flutter/material/MaterialApp/MaterialApp.router.html) constructor. By default, it requires an implementation of the [RouterDelegate](https://api.flutter.dev/flutter/widgets/RouterDelegate-class.html) and [RouteInformationParser](https://api.flutter.dev/flutter/widgets/RouteInformationParser-class.html#:~:text=RouteInformationParser%20class%20Null%20safety,initial%20route%20information%20from%20Router.) classes. These two implementations themselves imply the definition of a custom type to hold the app state that drives the creation of the [Navigator](https://api.flutter.dev/flutter/widgets/Navigator-class.html).

### 3. flow_builder.
According to the [official documentation](https://pub.dev/packages/flow_builder):

> **flow_builder** is a Flutter package which simplifies flows with a flexible, declarative API.

`FlowBuilder` is a widget that builds a navigation stack in response to changes in the flow state. `onGeneratePages` will be invoked for each state change and must return the new navigation stack as a list of pages.

```
FlowBuilder<Profile>(
  state: const Profile(),
  onGeneratePages: (profile, pages) {
    return [
      MaterialPage(child: NameForm()),
      if (profile.name != null) MaterialPage(child: AgeForm()),
    ];
  },
);
```

### 4. fluro.
According to the [official documentation](https://pub.dev/packages/fluro):

> Fluro is a null-safe Flutter routing library that adds flexible routing options like wildcards, named parameters, and clear route definitions.

Fluro prides itself on having the following features:

- Simple route navigation
- Function handlers (map to a function instead of a route)
- Wildcard parameter matching
- Querystring parameter parsing
- Common transitions built-in
- Simple custom transition creation
- Follows `beta` Flutter channel

---
While that is a list of package options, they are by no means the only options out there, and thus the choice solely depends on your particular use case.

## References.

- https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade
- https://medium.com/flutter-community/beamer-v1-0-0-is-out-whats-new-and-how-to-migrate-b251b3758e3c
- https://morioh.com/p/137cb642b5f1
- https://verygood.ventures/blog/navigator-with-flow-builder

---
That was indeed all that I have to share for now. To all readers, cheers to code🥂, and have a blessed day.