Unlock the Power of Multi-Page Apps in Flutter
Flutter, the popular open-source SDK developed by Google, has revolutionized the way we build natively optimized applications for mobile, web, desktop, and embedded systems. With its growing popularity, it’s essential to master the art of creating seamless user experiences. One crucial aspect of achieving this is by splitting your app into multiple pages, allowing users to navigate effortlessly through your application.
What is a Page in Flutter?
In Flutter, a page refers to a single screen visible at a particular point in time. This screen can comprise numerous widgets organized together to create the desired UI. These pages or screens are known as Routes, and we use the Navigator widget to navigate between them.
Navigating Pages with Ease
The Navigator widget, bundled with MaterialApp, manages a stack of Route objects. Think of a route object as a representation of a single page or screen. The route at the top of this stack is visible to the user, and when the user presses the back button, the uppermost route pops out, revealing the route below it, much like a stack of cards.
Let’s Get Started!
To create a multi-page app, we’ll begin by configuring the top-level Navigator along with other basic settings for our app using the MaterialApp widget. We’ll create two pages, FirstPage and SecondPage, to demonstrate navigation.
FirstPage: The Beginning
Our FirstPage widget consists of a Scaffold with an AppBar displaying the page title and a body displaying a button to navigate to the SecondPage.
Navigate to SecondPage
To navigate to SecondPage, we’ll use the Navigator.push() method, which adds a Route to the stack of routes managed by the Navigator. We’ll create the SecondPage, almost identical to the FirstPage, with the text changed to “Go Back.”
Going Back to FirstPage
To navigate back to the FirstPage, we’ll use the Navigator.pop() method, which removes the current Route from the Navigator’s stack of routes.
Returning Data from SecondPage to FirstPage
Sometimes, you may want to return data from the route being popped from the Navigator’s stack. We’ll update the onPressed() callback in SecondPage to return a message saying “Returned from SecondPage” when navigating back to FirstPage.
The Result of Our Hard Work
Run the app and press the “Go Back” button on the SecondPage. Check the console to see the message returned.
Next Steps
In this article, you’ve learned how to use the Navigator widget to create multi-page apps in Flutter and return data when a route pops out. This is just the beginning of your Flutter journey. I recommend exploring the official docs to learn more about navigation and other essential concepts. Happy Fluttering!