Navigate Deep in your app — 1[Flutter tutorial]

5 min readMar 17, 2020

Hey, have you ever wondered how navigation works in Flutter applications. Let’s see that…

Flutter widgets are built using a modern framework. The central idea is that you build your UI out of widgets. But it’s important to have a better understanding of how it actually functions.

In Flutter, navigation from one screen to another is possible because of Navigators, a simple widget that maintains a stack of Routes, or in simpler terms, a history of visited screens/pages.

Almost every app in this world contains more than one screen. For eg. TikTok, Youtube, Netflix. And there is always some methods/functions that helps us to navigate through screens of these apps.

In flutter, Screens are called Routes. In Android, a route is equivalent to Activity, and in iOS, a route is equivalent to a ViewController.

In flutter, just like everything else, the Route is also a widget. To manage routes, flutter uses the Navigator widget.

Navigator provides us PUSH and POP methods to navigate between screens.

Before getting to the actual working part,

Let us understand and grab a basic idea of push and pop operations.

TL’DR: There is stack of screens. Push operation add screen on top of it and Pop operation removes top screen. That’ it.

Focusing less on the designed/computed view and more over the conceptual view which makes it less complicated, I am sure this article will help you understand the concept in a more simpler and easier way.

Let’s take a theory example.

Routes are an abstraction for a screen or a page of an app. For example, ‘/home’ will take you to HomeScreen or ‘/login’ will take you to LoginScreen. ‘/’ will be your initial route.

Since this is a basic example, each route contains only a single button. Tapping the button on the first route navigates to the second route. Tapping the button on the second route returns to the first route.

As promised to make it less complicated, let us first understand the basic concept of stack operation.

If you have trouble visualising stacks, just assume a stack of books.
In a stack of books, you can only see the top book.
If you want to access any other book, you would first need to remove the books on top of it.
The bottom-most book in the stack was put first and can only be removed at the last after all books on top of it have been removed.
PUSH Operation
Push operation refers to inserting an element in the stack. Since there’s only one position at which the new element can be inserted — Top of the stack, the new element is inserted at the top of the stack.
POP Operation
Pop operation refers to the removal of an element. Again, since we only have access to the element at the top of the stack, there’s only one element that we can remove. We just remove the top of the stack.

In case of flutter when we navigate to another screen the Push operation will take you from login page ➸ dashboard and Pop operation will take you from dashboard ➸ login page and.

Flutter gives you MaterialPageRoute, which transitions to the new route using a platform-specific animation. But flutter is so flexible. You can create your own route and transitions animation for a specific platform.

Usage of function provided in Navigator

Using Navigator.push()

If you have a limited route (like one or two) then you can use Navigator.push() method. The push() method adds a Route to the stack of the routes managed by the Navigator.

2. Using Navigator.pop()

When we use Navigator.push() then to return to the first route, we have to use Navigator.pop() method. The pop() method removes the current Route from the stack of the routes managed by the Navigator widget.

3. Using Navigator.pushNamed()

Navigator.push() method works when you have only two or three routes. But when it comes to complex apps, you might have multiple routes. In that case, if we use Navigator.push() method then it will result in a lot of code duplication.

So when you have multiple routes in your app then you should use Navigator.pushNamed(). To identify and differentiate between multiple routes, we can give a name to the routes. This makes easy to navigate between different routes.

Let us understand more about navigators

Use-case: pushUntil

Push the given route onto the navigator, and then remove all the previous routes until the predicate returns true.
The predicate may be applied to the same route more than once if Route.willHandlePopInternally is true.
To remove routes until a route with a certain name, use the RoutePredicate returned from ModalRoute.withName.

Use-case: popUntil

Calls pop repeatedly on the navigator that most tightly encloses the given context until the predicate returns true.
The predicate may be applied to the same route more than once if Route.willHandlePopInternally is true.
To pop until a route with a certain name, use the RoutePredicate returned from ModalRoute.withName. The routes are closed with null as their return value.

Now what, where do we go from here??

So, here we learnt about push and pop operations in flutter, how these operations would be performed. I tried keeping simple for the users. Hope you all got a brief idea about the stack operations. Constructive ideas are always welcomed.

Part 2 : Navigate Deep in your app — 2[Flutter tutorial programatically]

What’s the biggest thing you’re struggling with right now that I can help you with? What kinds of content would you like to see more on this blog?

If you enjoyed this post ,let me know in the comments how much useful this blog was to you.If you enjoyed this post, I’d be very grateful if you’d help it spread by emailing it to a friend, or sharing it on Twitter or Facebook. Thank you!

Connect with me on: Github Twitter LinkedIn Instagram Youtube Patreon

Feel free to surprise me ☕

#flutter #widgets #crossplatform #tutorial #navigation #screens #push #pop #viveky259

**Subscribe for upcoming posts. Thanks for reading. Let me know what you think about this post.

References:

Navigate Deep in your app — 1[Flutter tutorial]

Usage of function provided in Navigator

**Subscribe for upcoming posts. Thanks for reading. Let me know what you think about this post.

Written by Vivek Yadav