This article explains how Flutter’s new Navigator and Router API works. If you follow Flutter’s open design docs, you might have seen these new features referred to as Navigator 2.0 and Router. We’ll explore how these APIs enable more fine-tuned control over the screens in your app and how you can use it to parse routes.

These new APIs are not breaking changes, they simply add a new declarative API. Before Navigator 2.0, it was difficult to push or pop multiple pages, or remove a page underneath the current one. However, if you are happy with how the Navigator works today, you can keep using it in the same (imperative) way.

The Router provides the ability to handle routes from the underlying platform and display the appropriate pages. In this article, the Router is configured to parse the browser URL to display the appropriate page.

This article helps you choose which Navigator pattern works best for your app, and explains how to use Navigator 2.0 to parse browser URLs and take full control over the stack of pages that are active. The exercise in this article shows how to build an app that handles incoming routes from the platform and manages the pages of your app. The following GIF shows the example app in action:

Navigator 1.0

If you’re using Flutter, you’re probably using the Navigator and are familiar with the following concepts:

• Navigator — a widget that manages a stack of Route objects.
• Route— an object managed by a Navigator that represents a screen, typically implemented by classes like MaterialPageRoute.

Before Navigator 2.0, Routes were pushed and popped onto the Navigator’s stack with either _named routes _or _anonymous routes. _The next sections are a brief recap of these two approaches.

#flutter #programming #developer #mobile-apps #web-development