Flutter – Named Routes
An app has to display multiple screens depending upon the user’s needs. A user needs to back and forth from the multiple screens to the home screen. In, Flutter this is done with the help of Navigator.
Note: In Flutter, screens and pages are called routes.
In this article, we will explore the process of navigating through two named routes. To do so follow the below steps:
- Create two routes.
- Navigate to the second route using Navigator.push() method.
- Return to the first route using Navigator.pop() method.
Let’s explore them in detail.
Creating Two Routes:
Here we will create two routes, the first route will have a single button that on tap leads to the second route, and similarly, the second route will have a single button that brings the user back to the first route. To do so follow the below code:
- Dart
|
Navigating with Navigator.push(). to the second route:
To switch to a new route, use the Navigator.push() method. The push() method adds a Route to the stack of routes managed by the Navigator. In the build() method of the first Route widget, update the onPressed() callback to lead to the second route as below:
- Dart
|
Return to the first route using Navigator.pop():
To implement a return to the original route, update the onPressed() callback in the second Route as below:
- Dart
|
Complete Source Code:
- Dart
|
Output:
0 comments