Flutter: Multi Page Applications with Routes

Flutter: Multi Page Applications With Routes

Flutter is a mobile App SDK by Google which helps in creating modern mobile apps for iOS and Android using a single(almost) code base.

Unlike other frameworks like React Native, it neither uses JavaScript as a Programming Language nor it needs an interpreter bridge to convert JavaScript code into native code, instead, it compiles directly into Arm binaries and runs on the native platform.

A Mobile App is generally built for displaying multiple contents which can’t be accommodated in a single screen. Even if we manage somehow, it will create a maintenance overhead as any change would impact the rest of the screen. Furthermore, a cluttered screen can take the attention of users away from your valuable functionalities.

Flutter provides what we call as routes to enable multi page application within a MaterialApp . If you’re not comfortable with Material Design in Flutter, I’ll highly recommend you to read this post on the same topic.

To properly understand the requirements of multi page application, let create a basic Material Design App which provides two options to the user.

1. Login to App using Email.
2. Login as Guest.

Let’s provide these two options using FlatButton widget so that we can handle the user’s choice. Here is how the code for this application shall look like

Scaffold Body with two FlatButtons

And here is how the output shall look like

Material App with two Login Options

One the user clicks on either of Login as User / Login as Guest, a totally new screen should come up, or in the terms of Flutter, a totally new Scaffold should come up.

Remember, we can’t load Material App again and again, it’s loaded when the application is started. However, we can shuffle between different scaffolds within the MaterialApp

So let’s wrap up displaying both the buttons in a scaffold which is part of a different class i.e BaseApp

Main Page Scaffold wrapped inside a Separate class `BaseApp`

Here is how the Main MaterialApp shall look like after this change

BaseApp called from home of MaterialApp

The code changes above will not impact the output in any way. It was just a rearrangement of MaterialApp home Scaffold in a separate class.

Let’s create Separate Screen for LoginAsUser and LoginAsGuest

We know by now that we need to create separate screens for both the login options and that can be achieved by two different Scaffold, wrapped inside a Stateless Widget as shown below

Two different Scaffold for login options

Now, you must have guessed that once the user clicks on either of the login buttons, we need to load on the widgets. You may have also guessed that we need to load these widgets from the 'onPressed handler of the login buttons.

Well, those guesses are correct, but we can’t do something like this

Loading Widget which will NOT work in this case

This is where the idea of Routing comes into the picture

How to use Routes

To use Routes in Flutter, we first need to define the routes and remember that all routes belong to MaterialApp.

So we need to define routes inside the MaterialApp. When we define the route we also specify which widget to load for a particular route by giving it a proper name. Here is how it is done

Definition of Named Routes in MaterialApp

Once we have the routes available inside MaterialApp, we can use the same in any of the scaffold used in the MaterialApp using Navigator. Since we have named routes, we’ll use Navigator.pushNamed(...) function to the widget. Here is how our implementation of onPressed(...) function shall look like

How routes are invoked from button `onPressed(…)`

Here is how the resultant output shall look like

Routes in Action

Now, as soon as a new widget is loaded as part of route navigation, there is a back button at top left corner of the screen and we need to press that button to go back.

However, most of the time, we want app either to go back automatically or as a result of some action like pressing a button. To handle the same, we need to pop the current context from the Navigator. Here is how we can do the same

Pop from current context to go back to the main screen

Here is how it will look like

Pop Context in action

The Idea of InitialRoute

Till now whatever we’ve learned is good enough for creating multi page applications with routes. However, there is an additional concept in routes called initialRoute and it would be interesting to know about it.

The first widget that is loaded once the MaterialApp comes into picture is decided by home: , However, instead of home, we can use what we call as initialRoute where we can specify which route to fetch for loading the first widget when the MaterialApp is loaded.

Here is how this is done

Using initialRoute instead of home

And the end result will remain the same.

This is one advantage of using initialRoute where we can specify any route as initialRoute . For example, if we want ‘/UserLogin’ page to be loaded when the application is loaded, we can change the code as

Invoking /UserLogin as startup Page

Some of you might be wondering about how this is an advantage. I can very well use home: LoginAsUser() code to display the same. Well, that’s correct, but what will happen when you press “Go Back to Main” button ?

It will be an error because there is no context to go back to, however, if you use initialRoute , the button will always go back to root route defined by ‘/’ and that’s the reason you need to define a root route i.e. ‘/’ if you want to use initialRoute , without it, it will throw an error

That’s all for this particular post. I hope you’ve understood the content and learned something new. We’ll explore some more things about flutter in upcoming blogs

Thanks for Reading…!!!

Daksh