Navigation in Flutter. Navigate to the new screen using Navigator.push and Navigator.pushNamed

Navigation in flutter

Almost every app developed for real-world problems contains multiple screens. Whether its social media apps like Facebook, Instagram or video watching platform like YouTube and Tik-Tok. Every complex app contains multiple screens.

Every platform has its own way to navigate between different screens. Whether its Android, iOS, React Native, Ionic, Apache Cordova, or Xamarin and the same thing go for Flutter as well.

Terminology: 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 manages all the routes and also provides methods to navigate between them like Navigator.push() and Navigator.pushNamed().

In flutter, there are two ways to navigate to a new route aka Screen.

1. Using Navigator.push()
2. Using Navigator.pushNamed()

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.

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.

Navigator.push sample code

Return to the first route 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.

Navigator.pop sample code

Sample app using Navigator.push()

Sample app using Navigator.push()

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.

To use Navigator.pushNamed(), we have to follow two steps:

1. declare routes property in the MaterialApp constructor.
2. call the Navigator.pushNamed() method when needed

To define routes, we have to provide two additional properties to the MaterialApp constructor.

1. initialRoute
2. routes

Just like the home property of the MaterialApp, the initialRoute property defines from which route the app should start. Like the starting screen of the app.

Warning: When using initialRoute, don’t define a home property.

The routes property defines the available routes and the widgets to build when the route is called.

Properties of MaterialApp constructor

Once we define the properties in initialRoute and routes, we can now call the Navigator.pushNamed() method whenever we need it.

When we call the Navigator.pushNamed() method, we need to define the route name. After getting the route name, flutter knows which screen (widget) it needs to build.

Navigator.pushNamed() sample code

Sample app using Navigation.pushNamed()

Sample App in Navigation.pushNamed()

Learn More about Dart and Flutter

• List in Dart
• Abstract Class and Abstract Method in Dart
• Inheritance in Dart
• Constructors in Dart
• Classes and Objects in Dart
• Arrow Functions in Dart
• User-Defined Functions in Dart
• Functions in Dart
• Switch Case in Dart
• Conditionals in Dart
• Operators in Dart
• Keywords in Dart
• Variables in Dart
• Data Types in Dart
• Dart SDK

Follow me for more such content.

• My Site
• My Blogs
• LinkedIn
• Instagram
• Twitter
• Stackoverflow
• Github