Navigation and routing in Flutter.

Nikita Gandhi
6 min readNov 8, 2018

--

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

--

--

Nikita Gandhi
Nikita Gandhi

Written by Nikita Gandhi

Community Manager at Google For Developers, Flutter Enthusiast, Avid Writer, Apathetic at Social Gatherings! Can make round dosas!

Responses (2)