Flutter Navigation and Routing: A Complete Guide

Flutter offers a comprehensive approach to handle deep links and screen transitions. While the Navigator is suitable for smaller apps with basic deep linking, the Router is recommended for larger apps requiring intricate deep linking. This ensures proper deep link handling across Android, iOS, and web platforms.

Table of Contents

Introduction to Navigation and Routing

Difference Between Navigation and Routing

Flutter 1.0 vs. Flutter 2.0

Working of the Navigator

Steps to Start Navigation in App

Conclusion

Introduction to Navigation and Routing

A full method for handling deep links and switching between displays is provided by Flutter. Small apps that don’t require extensive deep linking can utilize Navigator, but larger apps that need complex deep linking and navigation should use the Router as well. This will allow the app to handle deep links appropriately on Android and iOS and maintain sync with the address bar when it is running on the web.

Any program must have good navigation. It offers a consistent abstraction over the navigation APIs made available by different platforms. APIs available for navigation in Flutter are

• Imperative Navigation: Introduced in Flutter 1.0, it uses an imperative style where navigation is achieved by pushing and popping widgets from a stack.
• Declarative Navigation: With the advent of Flutter 2.0, navigation has evolved to a declarative style. Here, routing becomes state-dependent, meaning pages change as the state does. This version also enhances web navigation support.

Difference Between Navigation and Routing

Any mobile app’s workflow is determined by the user’s ability to navigate to various pages; this process is known as routing. The MaterialPageRoute class of Flutter’s routing system comes with the two methods that demonstrate how to switch between two routes and they are:

1. Navigator.push() — To navigate to a new route.
2. Navigator.pop() — To return to the previous route.

The Navigator widget manages routes using a stack approach. Routes are stacked based on user actions, and pressing back navigates to the most recent route.

Flutter 1.0 vs. Flutter 2.0

Flutter 1.0

All of the navigation features in a Flutter app are provided by the Navigator class. The stack can be modified using Navigator’s push to stack or pop from stack functions. Navigator.pop is used to return from the current page, while Navigator.push is used to navigate to a newer page. The current route is modified using the pop method, which only accepts BuildContext. Additional methods offered by Navigator, such as *pushReplacement*, produce arguments in a manner identical to push. Navigation back to the previous route is not possible because it would replace the current one.

In older editions of Navigator, routes were either pushed or popped onto the stack of the Navigator as named or anonymous routes.

1. Named routes

Code reuse is made possible by named routes since they let you modify the path using strings rather than by providing component classes. Maps are what named routes on MaterialApp are defined as. From any area of the application, these pathways can be used.

To switch to a new route, pushNamed is used rather than push. Similarly, pushReplacement is replaced with pushReplacementNamed. For all routes, the pop technique is the same.

2. Anonymous routes

Most mobile apps stack their screens one on top of the other. This is simple to accomplish in Flutter by using the Navigator. Under the hood, Navigator is already used by MaterialApp and CupertinoApp. Using Navigator.of(), Navigator can be easily accessed or a new screen can be displayed by Navigator.push(). Navigator.pop() will take user back to the previous screen. The DetailScreen widget is positioned on top of the HomeScreen widget when push() is called. Since the widget tree still contains the previous screen (HomeScreen), all State objects connected to it remain in place while DetailScreen is shown.

Flutter 2.0

In order to enable the ability to extract routes from the platform itself (such web URLs) and to make the app’s screens a function of the app state, the Navigator 2.0 API extends the framework by adding new classes. Because Flutter 2.0 supports a declarative approach, the navigation has been improved.

Features of Flutter 2.0 are as follows:

1. Page: a setter for the navigator’s history stack that is unchangeable.

2. Router: configures how the Navigator will display a list of pages. This list of pages typically varies when the underlying platform or the app’s status changes.

3. RouterDelegate: Defines how the Router detects changes in app state and behaves in response to those changes. Its responsibility is to build the Navigator with the current list of Pages while listening to the RouteInformationParser and the app state. A fundamental widget used by Router is RouterDelegate. It reacts to the route push and route pop intentions of the engine.

4. RouterInformationParser: It transforms the RouteInformation from RouteInformationProvider into a user-defined data type.

5. BackButtonDispatcher: reports to the Router when a button is pressed.

Working of the Navigator

These following steps show how all the components work together as one piece:

1. The RouteInformationParser converts a new route into a user-defined data type.
2. The RouterDelegate method updates the app state and calls notifyListeners.
3. The Router instructs the RouterDelegate to rebuild via its build() method.
4. The RouterDelegate.build() returns a new Navigator reflecting the updated app state.

Steps to Start Navigation in App

There are three steps required to start navigation in the app and they are:

1. Create Two Routes: Define the initial and destination routes.
2. Use Navigator.push(): Transition to the new route. To navigate or transition to a new page, route, or screen, the Navigator.push() method is used. The push() method adds a page or route to the stack, and then uses the Navigator to manage it. Once more, we use the MaterialPageRoute class, which enables platform-specific animations for route transitions.
3. Use Navigator.pop(): Navigate back to the initial route. The Navigator controls the stack, and the pop() method enables to remove the current route from it.

Conclusion

The Router and Navigator are designed to work in tandem. By executing imperative methods like push() and pop() on the Navigator, or declarative routing packages like go_router, Router API can ne navigated. Each route on the Navigator is page-backed, which means it was made from a Page using the pages option on the Navigator constructor, when you navigate using the Router or a declarative routing package. On the other hand, any Route added to the Navigator by calling Navigator.push or showDialog will add a pageless route. Page-backed routes, as opposed to pageless ones, can always be deep-linked when utilising a routing package.

All subsequent pageless routes are also deleted when a page-backed route is deleted from the navigator. For instance, if a deep link navigates by eliminating a page-backed route from the navigator, any pageless _routes that follow up to the following page-backed route are also eliminated.

For a consistent experience when utilising the browser’s back and forward buttons, apps that use the Router class integrate with the History API. A History API entry is added to the browser’s history stack each time you use the Router to traverse. When the back button is pressed, the Router switches to reverse chronological navigation, which transports the user back to the last

FAQs

1. What’s the difference between Navigator and Router in Flutter?

While Navigator is suitable for basic deep linking in smaller apps, the Router is designed for intricate deep linking in larger apps.

2. How does Flutter 2.0 improve navigation?

Flutter 2.0 introduces a declarative approach to navigation, making routing state-dependent and enhancing web navigation support.

3. What are named routes in Flutter?

Named routes allow for code reuse by defining routes using strings, facilitating navigation using these predefined strings.

4. How does the Navigator widget work?

The Navigator manages routes using a stack approach, where routes are stacked based on user actions.

5. Why is effective navigation crucial in Flutter apps?

Good navigation ensures a seamless user experience, allowing users to easily move between different sections or pages of the app.

Stay tuned for our next article, where we’ll dive deeper into advanced navigation features in Flutter!