A app has to display multiple screens depending upon the user 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().
- Return to the first route using Navigator.pop()
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:
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:
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:
Complete Source Code:
- Flutter - Arguments in Named Routes
- Routes and Navigator in Flutter
- Getting Started with Cross-Platform Mobile Application using Flutter
- Difference between React Native and Flutter
- Difference Between Rows and Columns vs Container in Flutter
- Multi Page Applications in Flutter
- Container class in Flutter
- Difference Between Stateless and Stateful Widget in Flutter
- Rive animations in Flutter
- ProgressIndicator in Flutter
- Flutter - Stateful vs Stateless Widgets
- Listview.builder in Flutter
- Splash Screen in Flutter
- How to Add images in Flutter App?
- Raised Button widget in Flutter
- Fluttertoast in Flutter
- Flutter - Architecture Application
- Designing a Form Submission Page in Flutter
- Creating a Simple Application in Flutter
- Customizing Fonts in Flutter
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.