Navigation in Flutter. Navigate to the new screen using Navigator.push and Navigator.pushNamed
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
In flutter, there are two ways to navigate to a new route aka Screen.
- Using Navigator.push()
- Using Navigator.pushNamed()
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.
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.
Sample app using Navigator.push()
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:
routesproperty in the
- call the Navigator.pushNamed() method when needed
To define routes, we have to provide two additional properties to the
Just like the
home property of 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
routes property defines the available routes and the widgets to build when the route is called.
Once we define the properties in
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.
Sample app using Navigation.pushNamed()
For More Information Please Visit Following Links
So that’s it for today guys. I hope it helped you. Feel free to let me know If I miss something. Till then Keep Loving, Keep Coding.
Wanna get in touch with me? Here are links. I’ll love to become your friend. 😊
JAY TILLU😎 (@jay_tillu) | Twitter
The latest Tweets from JAY TILLU😎 (@jay_tillu). 🌏 विधायास्य धमॅस्य संरक्षणम् 🌏 🌐 Society before Self 🌐 🙏🏻…
Jay-Tillu - Overview
Sign up for your own profile on GitHub, the best place to host code, manage projects, and build software alongside 40…
Jay Tillu. 87 likes. Hey there, This is my official page. As Jay is nothing without tech, here also everything will be…
Login * Instagram
Welcome back to Instagram. Sign in to check out what your friends, family & interests have been capturing & sharing…
or just mail me at email@example.com