Flutter Navigation Tutorial
In this Flutter Navigation Tutorial, we want to have a look at how navigation is done in Flutter. We want to make a small application, where we can navigate from one screen to another. Also, we have a look at how to pass data between the different screens.
So first of all, let us create a new project (I am using Android Studio by the way) and also add three dart files with the following names to the lib folder: content.dart, main.dart and newPage.dart.
To the main.dart we want to add a BottomNavigationBar. Besides, if you want to know more about the BottomNavigationBar, please check out my very small tutorial on how to implement that here. So, let us now copy the following code into our main.dart.
After that, we should see the BottomNavigationBar with home, messages and profile as our tabs. Also, we should have a burger menu and a Drawer menu should open if we click on it. So far nothing is working properly, but we will hook it up soon enough.
Implementing the Content of our BottomNavigationBar
To be able to change screens, we need to add some code to the content.dart file. Just copy it for now. It will become clearer later on in the tutorial.
So far, so good. Now you should be able to run the app and also to switch between different screens as well as to open the Drawer menu.
Navigation in the Flutter Navigation Tutorial
Navigation usually is done by pushing and popping onto and from a “stack”. So we push a new page onto the stack, and if we want to go back, we pop it.
There are two main ways to navigate in Flutter. You can either register a route in MaterialApp, or you can push via MaterialPageRoute. We will incorporate both in our tutorial.
Via registered routes
The first way is to use predefined routes. So, add these lines of code to register a new route in MaterialApp. We call it newPage:
To push our newPage on top of the current one we can use the following code. So, for this tutorial we put it into our Drawer:
Notice the pop before the push here? We need this to pop the Drawer menu before we push the new page on top of it.
Use MaterialPageRoute for Navigation
The second way involves MaterialPageRoute. For that, we don’t need to register anything, just put these lines of code into the Drawer as well.
We also Have to Implement our newPage in the Flutter Navigation Tutorial
Next, we need to implement our newPage. Otherwise, we won’t be able to navigate to it. In it, we add a button to go back to the previous page. In onPressed() we pop this page and go back to the previous one.
So far so good. Now you should be able to navigate the tutorial app: You can change the screen via the BottomNaviagtionBar or open the Drawer menu and go to the newPage.
Passing Data
When navigating an app you most probably want to pass data between the different screens. So, we want to implement exactly that.
Passing Data when Pushing a Page
First, we want to update our newPage.dart, so that we can pass a string to it. Also, notice that we added a new button too. And do not forget the Text(status) line, since we want to proof, that we got the string from the getBackString page!
Be aware, that this tutorial only covers passing data when navigating via MaterialPageRoute. But, it is also possible to pass data with defined routes, though it is a little more complex. Check out the official documentation for more information on that.
Of course, we now have to update the main.dart file to provide a string for the requirement of our newPage.
Get back data when popped
For the clickGetBackString() method, we add the following code to our newPage.dart. What it does is it waits for getting a string back from the page, that we jet have to make.
So, let us add a new dart file with the name getBackString.
As the name suggests, we want to get back a string from that new screen. Add the following to the file:
Notice the WillPopScope? This way we can overwrite how the back button is handled. Actually, we have to overwrite it in our case since a string is expected.
That is it with the Flutter Navigation Tutorial
That is more or less it. So, now you should have a functioning navigation-app. And I hope you learned something. You may be interested in other tutorials I made, for example on how to authenticate in Flutter, or how to use Firestore with Flutter. Or maybe you want to know how dynamic localization works. Also, I would love to hear feedback from you.
Originally published at www.gotut.net.
