Making of MultiScreen Application in Flutter.

Most applications on mobile contain several screens with different information. This article is intended for detailed understanding of navigation from one screen to another and back.

Before that, let’s understand what is a multipage application.

A multi page application is one where we create multiple screens with their own widgets with one of them being displayed at any point of time.

Most of the time, the screens are displayed based on user interactions, which is achieved using navigation functionalities.

Multi page Application Layout :

Everything is a widget in Flutter including the multi page applications. The MaterialApp displays different pages based on user interactions.

Let’s create a MaterialApp with a simple widget inside which will be used as first screen for our application.


class
MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new FirstScreen(),
);
}
}

Describing the UI of the first screen :

We are creating a custom widget for FirstScreen under the MaterialApp. Let us describe the FirstScreen widget with a basic Scaffold containing an AppBar and a RaisedButton inside the body. For a detailed understanding on how to create a Scaffold, you can refer my pervious blog here.

class FirstScreen extends StatelessWidget {
@override
Widget build (BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Multi Page Application"),
),
body: RaisedButton(
child: Text('Launch screen'),
onPressed: () {
// Code for Navigation to the second screen.
),
);
}
}
UI for the First Screen

Before we add our code for navigation, let us create another widget screen where another widget will be loaded after the button is pressed.

Describing the UI of the Second Screen :

class SecondScreen extends StatelessWidget {
@override
Widget build (BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Second Screen"),
),
body: Center(
child: new RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: new Text('Go back!'),
),
),
);
}
}
UI for the second screen.

What we’d like to do now is to add an action on the FirstScreen RaisedButton so that SecondScreen can be displayed.

This can be achieved in a multiple ways. Before that, let us understand what are Routes.

The concept of Routes and Stack in Navigation :

Routes help in Navigation where it directs where to go from the current screen and tells which page to load. It takes help of Stack for to keep a track to where all it navigated to and helps in coming back to the initial page.

Stack helps in loading of new page, and loads a new page on the top of the existing one. It follows the concept of object oriented programming where in the pages that are navigated are pushed inside the stack and while navigating back, the pages are popped outside the stack.

Flutter achieves stack functionality by using Navigator, while MaterialPageRoute helps in routing and loading of new pages.

The code for the same is as follows :

onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},

Push the pages!

A new route is pushed on the stack using Navigator.push method. The navigator understands the current page from the context it is approached and builds a new route using MaterialPageRoute from the context page (FirstPage) to the new page. (SecondPage)

Pop them out!

Navigator in Flutter is a manager which manages the routing of the application, from one page to another. It helps in pushing a new route from the current page onto the stack. It also helps in going back to the existing screen using the Navigator.pop.

Here is how the code for Navigator.pop looks like :

onPressed: () {
Navigator.pop(context);
},
Stack Operations

The Navigator will pop the current page from the stack and navigate back to the screen it was navigated from.

Working example of the code above.

Method [2] for routing through the screens :

There might be complex applications or bigger applications where we need to navigate to the same screen. Instead of code duplication, it is handy to define routes once and call the Route Name for Navigation.

After declaring the two screens [FirstScreen and SecondScreen], we can declare the routes inside the MaterialApp.

MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => FirstScreen(),
'/second': (context) => SecondScreen(),
},
);

We have now added properties to MaterialApp. The initialRoute property defines where our app should start with.

The routes property define the available named routes and which widgets they should build after navigating to that route.

Navigating to the Second Screen :

Now that we have defined our route names and the widget associated with each route, we are all set to navigate.

In the build method of your FirstScreen, Widget, we’ll update the onPressed callback:

onPressed: () {
Navigator.pushNamed(context, '/second');
}

The route names are mapped to the widget name.The Navigator pushes the name of the route on to the stack from the context screen.

Navigator.pushNamed

You can Navigate to the context screen using Navigator.pop method as explained above.


More deals with Push Methods :

Suppose you want to navigate from one screen to another and do not want to move back to that screen again. You can use Navigator.pushReplacement method.

Navigator.of(context).pushReplacementNamed('/screen2');

The Navigator updates the route table with the new name. It is ‘/screen2’ in our case. This method can be used in scenarios like the Splash Screen to Home Page Navigation where you don’t want the user to navigate back to Splash Screen.

Updated Route Names.

Pop+Push Named Method :

Incase you want to replace the existing screen and update it with another widget with some applied changes, you can use the Pop and Push Named Method. For example in an e-commerce application, you want to update the screen with some filters applied, you can pop the default screen and load a new widget which displays results with the applied filter.

Here is how you can use the popAndPushNamed method :

Navigator.popAndPushNamed(context, '/screen2');

Hope this article has walked you clear with the concepts of Navigation and Routing. In case you want to connect with me you can tweet at https://twitter.com/nikkitagandhi or write me on nikitag500@gmail.com!

You can also refer to my previous article on Basics of Scaffold if you need help in getting kick started with writing applications in Flutter.

Please don’t forget to clap for the article if you liked reading it. See you soon with more concepts in Flutter :)