Routing Tutorial for Flutter

     Welcome to this simple Flutter tutorial for navigating between multiple pages, or routing. This tutorial was made as a class assignment and since we are exploring Flutter for our class project, we decided to do a simple tutorial to help others learn a bit more about it. This was created using Tensor Programming’s video Tensor Programming's Video and adapted as a small tutorial you see here by me, Carmelo González, and my class partner Zuleyka González.

      In flutter, when we want to cycle through different pages we have to create routes. These are classes that belong to the Navigation family (More info here) and we can invoke when we trigger an action, for example onPressed when we use Buttons. The Navigators works in stacks, you push a page when you want to access one and pop when you wish to return to a previous one. Let’s write a simple code to check this out.
(In Android a route is equivalent to an activity, in iOS its equivalent to ViewController, in flutter it’s just a Widget)

First of all be sure to have Flutter installed on your computer, you can install the plugin on Android Studio which is the one I’ve been using. More info can be found here here.

Creating Page One
Now let's begin by creating a New Flutter Project, we can name this “routing_tutorial”. After our workplace is set up, we go to lib folder to the main.dart. We delete the example code that it generates and only leave, void main() and class MyApp.

First, we create a ThemeData which will contain the color palettes that are going to be used on the app. Colors can be changed to preference.

First, canvasColor this sets the background color of the app’s pages. Then, the accentColor that will be used on our app’s upper bar. More on this later...

Second, we work on MyApp which contains our main page (the one that is seen when opening the application). We build our Widget which contains or better said, it returns a Scaffold. This is our basic layout where we add in different widgets to work with the app.

Third, we are going to add an appBar (the bar that displays on top of most applications, usually this is the one that contain the “back” button for android devices), and a body to this Scaffold that allows us to play a button in a specific place of the layout, the center in this case.

Forth, for appBar let’s add a title to give our current page and a background color. The background color from our themeData we created earlier, in this case the accentColor.

Inside the appBar: AppBar(), and this two lines of code…

        title: Text(“Page 1”),

backgorundColor: Theme.of(ctx).accentColor,

As for the Button, we used a RaisedButton which looks like a basic button we see in most UI’s and added a text that says: “Go to Page 2” once pressed, we want to move to the next page. The button’s class requires an action, and this is done by the onPressed method that’s currently empty and won’t do anything, so let's add some functionality using flutter’s Navigator class. Inside the onPressed brackets {} add this line of code...

Navigator.push(ctx, PageTwo());

This summons the Navigators, tell it to push this page on a stack and move to the PageTwo class (that we haven't implemented yet).

Creating Page Two (and Three)
First, let’s create our PageTwo class that extends the MaterialPageRoute, so our program understands that this is a route. Remember Navigator in Flutter works by calling (pop, push) different routes. On the inside we build it with context of our previous route (Page 1) so it inherits some of its property such as background color.

But it looks empty so let’s add some lines that we used in our MyApp class

Second, we see similar components that where on MyApp, such as a Scaffold with an Appbar and a Raised button. We proceed to create another push for onPressed that will lead to the 3rd page (not yet created) but we have no way of returning to our main page. (You’ll see flutter create a default back button on the top left, but we should practice and understand the pop method. Let’s add an icon in the appBar for going back to Page 1. Our widget code should look like this inside Scaffold

Third, we then create a widget that contain an icon “arrow_left” with an onPressed action Navigator.pop(ctx). This allows us to “pop” this page from the stack and go back to the previous one. The icon we are using can be customized from a variety that Flutter includes. And now we go to page 3, using pretty much the same code we have for Page 2 with an exception. Where will the button lead? A 4th page?... This seems a bit redundant, so let’s make it take us to Page1! Your code should look like this:

Fourth, the RaisedButton’s onPressed method needs to take us back to the main page (page 1). Add in this line inside onPressed

Navigator.popUntil(ctx, ModalRoute.withName(Navigator.defaultRouteName));

Since it’s a small one we don’t have a route for Page 1 which is MyApp class, so we tell the Navigator to pop until it goes to the default route which in this case is our MyApp. Its pop Page 3 and Page 3 from the stack and goes to the initial one. Our code should look like this…

Finally, we hit Run, wait for the APK to install and this should be our app, able to cycle through all 3 pages!