Screen Navigation in Flutter Apps with Data Handling
Welcome to another blog of my Flutter blog series. In the last blog, I discussed how you can build a side menu in a Flutter app.
You can check out that blog here.
Today, we’ll focus on how we can navigate to different screens in your Flutter app. So, let’s dive in!
I am going to extend the same application that we created in the last blog. Though you can create a new application and start from scratch.
We are going to look at the following things:
- Navigating to a screen
- Navigation using named routes
- Passing data to a screen
Navigating to a Screen
We’ll add a new screen with the name profile.dart under the screens directory. Here are the contents:
Do you see that? there’s nothing new we have done so far. The most important thing is how we navigate to this screen? of course, using the Navigator.
In simple words, Navigator in Flutter application manages the routes and screen navigation. According to official docs:
The navigator manages a stack of Route objects and provides methods for managing the stack, like Navigator.push and Navigator.pop.
Remember we created a side menu in the previous blog? We’ll navigate to the profile page using that menu. See how:
Have a look at these lines:
Navigator.pop(context);Navigator.push(context, MaterialPageRoute(builder: (context) => Profile()));
First, we need to close the side panel, this is done by the pop() method. If we don’t do this, we’ll come back to the screen having our menu open which doesn’t look good. Next, we pushed a route using the push() method with the Profile() widget.
Important: Note that we are pushing a new route to the stack, this will automatically add a back option to the App bar. There’s no need but if you want, you can add a Back button like this:
RaisedButton(child: Text('Back'),onPressed: () {Navigator.pop(context);}
So, what if you need to replace your screen instead of pushing a new screen? Simple, you’ll use pushReplacement() method keeping the arguments same. In this case, pressing the back button of the device will take you out of the app.
Navigation using named routes
Now we’ll look at how we can achieve the same goal using named routes. Named routes are recommended when you are navigating to a screen from multiple screens.
In the above code, we have added two new properties routes and initialRoute and defined two routes initially. Notice that we have removed the home property because the initialRoute will tell which route to load when the app starts.
Let’s replace the navigation that we did in the previous section with named routes. Here is what you need to do:
//previous
Navigator.push(context, MaterialPageRoute(builder: (context) => Profile()));//named route
Navigator.pushNamed(context, '/profile');
Notice that named route looks much clearer.
If you want to replace the screen with the new route, use:
Navigator.pushReplacementNamed(context, '/profile');Passing data to a screen
Here comes the interesting part. To explain this, let us create a new screen, detailed_profile.dart which looks like this:
Now, create a class ProfileArguments to pass arguments to the route.
From the profile page, we’ll pass the data like this:
Navigator.pushReplacementNamed(context, '/detailed-profile',arguments:
ProfileArguments(name: 'John Doe', email: 'john@example.com'));
We’re almost done. Just a little step to catch the route and pass it to the matching screen. Focus on the below part:
The onGenerateRoute is the callback method invoked when named routes are called. Here we checked the route name for correct match and returned a MaterialPageRoute.
That’s it. you’re done.
Summary
So we focused on 3 things in the story:
- Navigating to a new screen
- Navigation with named routes
- Passing data to the screen we are navigating to
I tried my best to explain things as simple as possible. I have planned a lot more stuff which I’ll be publishing soon. So, stay tuned for more and enjoy coding in Flutter :)
