Flutter: Routes and Navigation
Today we are going to learn about routes and navigation. In Flutter, navigation is built in. It is simple, quick and intuitive to use. By the end of this post, you will learn how to use the navigator and how to pass data between pages. With the introductions out of the way, let’s get to coding…..
The Layout
Let’s start with the basics. Create a new Flutter app then navigate to main.dart then remove everything. We start by importing the material package from Flutter. Next we set up our main function. In main, we create a new MaterialApp. In Material App, we set the home property to new Landing() or any name you like. This will give you an error as we did not create this class yet...so let's do that.
Create a Stateless widget called Landing or the name you set the home property to. In Landing, override the build method and create a new Scaffold. Set the body to new LandingBody(). You can also create an AppBar and give the page a title.
Your code thus far should look similar to this
Now it’s time to create the body. Create a Stateful widget called LandingBody. Here we will again override the Widget build method. Here you can feel free to build your own layout. Make sure to include a button so that we can hook up the navigator. I am going to create a Circle avatar and an Icon button. It is all wrapped in a container with a blue background.
Your app should now look like this
With the home page created, we will create two other pages. Create two new files page2.dart and page3.dart in your lib folder. You can create any layout you like for these pages once they contain two buttons as we will be using them to navigate forward and back. I am going to follow the format of the previous page and create a circle avatar and an icon button for both pages.
Page 2
Page 3
Basic Navigation
With the layout created, we can now work on setting up the navigator. First, we are going to set up a basic navigator to move between our app then we will work on passing data between pages.
Firstly, go to main.dart and import the two pages we created.
With our pages imported, it is time to set up our routes. The MaterialApp widget has a property called routes. We will use this property to specify the different routes in our app. By default, the widget assigned to the home property is given the route '/'.
The route property takes a String and a Widget Builder. The string will be the name of the route and the Widget Builder constructs a MaterialPageRoute (It basically builds the page with the appropriate animations, etc..)
To set this up, modify your MaterialApp widget to include these lines of code.
As you can see, we are setting the name of the route then building a new page for each route. You may notice that the widget we are calling is the name of the class we specified earlier in the different pages. We are able to do this because we imported them.
With routes all set up, time for the navigator. In Flutter, the navigator is the widget that manages the routes. It can either push new pages onto the screen, stacking them on one another or pop removing them from the stack and returning the user to the previous page. In main.dart, we will now configure the onPressed property of our button.
In the above code, we have a function which calls the Navigator. The Navigator is called using the keyword Navigator. .of(context) specifies the current context and .pushNamed() tells the navigator the name of the route we want to navigate to. In this case, we are navigating to the second page. As you may notice, the route passed into .pushNamed() is the same as the name we set earlier in routes.
If all worked without errors, when you click your button, you should be taken to the second page.
Now you might be wondering how to navigate the previous page. To accomplish this, we use the pop method. In page2.dart, modify the onPressed property of your button so that it looks like the code below
While we are here, we might as well configure the third button so that it navigates to the third page. As homework, I will leave that up to you to figure out. If you get stuck, leave a comment and I will try to assist you. If you reload the app now, your button once clicked, should now take you back home.
If you go to page three and try using pop to get back to the homepage, you will notice that an interesting problem pops up :). The pop method will take you back to page two and if you try using .pushNamed(), to navigate manually, a back arrow will appear on the homepage.
To solve this and to navigate back home where there are multiple pages on the stack, use pushNamedAndRemoveUntil. This pushes the named route and removes all other routes. With the other routes removed, the back button disappears. Implementing this is a bit tricky at first but becomes easy after you use it a few times. On page 3, modify your existing onPressed to reflect that of the code below.
Let us break down what’s going on here. The Navigator called like we are accustomed but with .pushNamedAndRemoveUntil added onto the end instead of pop or push. PushNamedAndRemoveUntil takes two arguments, the route name of type string and a route predicate which is of type route. When the predicate returns false, all the previous routes are removed from the stack until it returns true. In the above code, you can see for the first argument, route name is being passed in, then a function which takes a route and returns false. The second argument is the predicate. Now when you navigate home from page three, the arrow at the top of the page should be gone.
Passing data between pages
With the basics out of the way, let’s look at how we can pass data between pages. Passing data between pages requires us to manually build the page using MaterialPageRoute. Before we dive into setting that up, let’s modify our homepage and page two so that we accept and display the data we want to pass. In main.dart, I am going to add a TextField above the IconButton. For the hint text, it is going to ask the user to enter their name. I am also setting the onChange property which calls setState every time a character is entered. The value entered is stored in a variable called name.
Next, we move to page two. Here we are going to create a varible called name of type String and pass it into the constructor.
We then create a Text under the circle avatar to display it.
With the setup out of the way, we can start working on the MaterialPageRoute. Back in main.dart, modify onPressed
From
To
As you can see, the MaterialPageRoute take a builder which has a build method that returns a new Widget. In the above example, we are creating a new Page2 and passing in the name entered in the TextField to the name property of the widget (it comes from the widget's constructor).
If you reload the app, you should now be able to enter your name and see it on Page two when you navigate.
Here’s a look at the final product
Conclusion
Waw! Today we learnt how the basics of using the navigator in Flutter. As you can see, it very easy simple to use. Some parts require a little practice to fully understand but in all, it is a joy to use. If you have any questions, feel free to leave a comment and I will get back to you as soon as I can. Also, the code for this project is available on GitHub(https://github.com/Nash0x7E2/Flutter-Navigation-Playground). Clone, fork and modify to your heart’s content.
Thank you to Vectorpocket, Kraphix and Freepik of Freepik.com for the amazing pictures used in the Circle Avatar.
— Nash
Follow me on Twitter: https://twitter.com/Nash0x7E2
