Routing In Flutter

Updated 5 January 2024


In this tutorial, we’ll cover the Routing in Flutter.

Flutter Navigator class

The Navigator class provides all the navigation capabilities in a Flutter app.

Navigator offers ways to push objects to the stack or remove objects from the stack. Navigator.pop allows you to return from the current page and Navigator.push allows you to navigate to a more recent version of the page.

It’s a basic example of pop and push method. The push method takes BuildContext as the first argument and the second argument is a PageBuilder.

You can also check out our Flutter app development services for more Flutter App Development.

This is a basic example of pop the method. The pop method takes BuildContext and removes the Item/Page from the stack of navigation.

NOTE: Navigator provides more methods including pushReplacement, which make arguments similar to push. It will replace the current route, so navigating back to the older route is not possible.

Named routes in flutter

The named route allows you to change the path by using strings instead of providing component classes, which in turn enables you to reuse the navigation code.

Routes are defined as a map on MaterialApp. These routes are accessible in the whole application.

Intializing routes

The route is a map with string keys and values such as builders that are passed to the routes property on MaterialApp:

Using of named routes

Instead of pushpushNamed is used to change to a new route. Similarly, pushReplacementNamed is used instead of pushReplacement. The pop the method is the same for all the routes.

NOTE: You can pass the value to pop method. here is an example.

Here is another way to define your routes and keep your code more cleaner.

We need to create a class named AppRoutes.dart

Implement this class in our main.dart class

Thanks for reading.

Happy Coding 🙂

For more flutter tutorials, visit mobikul blog

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home