Navigating Widgets

Mostly, there are multiple screens in an application. We have a very important class for navigating between screens that is called navigator widget. This class is basically responsible for managing screen changes.

If we are talking about navigation in flutter, we cannot leave behind routes. This class supervises the possible navigation for different screens in an application. In short, routes class is a helper to flutter’s navigation system.

In the flutter’s navigation system we have following components which are very important:

  1. Navigator: It is responsible for managing the route.
  2. Overlay: Navigator uses this property to specify appearances of the routes.
  3. Route: It is the endpoint of a navigation.


The navigator widget is the main player responsible for the task of transitioning one screen to another. Navigation in flutter is made in a stack structure. We have one element which is at the top of the stack. It follows LIFO (Last In First Out) for the screens as well and just like stacks, in navigator widget we use push() and pop() methods.


Navigator widget heavily relies on overlay for specifying the appearances of the routes. Overlay can be defined as a stack of entries that can be managed independently. Overlay class has a number of properties and methods. We will learn about it more in the practical implementation of Navigator widget.


The elements in the navigation stacks are called routes. We can define routes in multiple ways in flutter. When we navigate to a screen, we use a new route widget and we can add some parameters as well. In simpler words, route is the endpoint of a navigation which is a helper for navigator widget.

MaterialPageRoute AND CupertinoPageRoute

The Route class can be defined as a high-level abstraction through the navigation feature. But we do not use it directly, as we have seen that a screen is a route in Flutter. In Flutter, there are different implementations in a platform-adaptive way. This is when MaterialPageRoute and CupertinoPageRoute comes into play, which adjust to Android and iOS respectively. So, before developing an application we will decide whether to use the Material Design or iOS Cupertino transitions, or both.

Practical Implementation of navigator widget.

The output of the above code will be:

Flutter Navigation Routing

Hero Animations

Hero animations are a very popular animation in the world of mobile applications. Hero animation is basically used for enlarging a hero (like an icon) and putting it to another screen when the page transition is triggered. In simpler words, the most important player this time is the Hero widget. Typically, it is just a single piece of the UI for which it makes sense to fly from one Route to another.

Hero Widgets

For the above animations, we have a special type of widget. The hero widget is responsible for these kinds of animations.

The Hero is not actually the same object we see flying from one screen to another. But from the user’s perspective, it is. The basic idea we use is to make a widget that lives between screens and just changes its appearance in some way.

We will now see the practical implementation of Hero widgets.

The output of the above program will be:

Flutter Navigation Routing

Pin It on Pinterest

Share This