Navigation & Routing in Flutter

Shivam Sharma
2 min readFeb 16, 2020

--

Most of the apps has multiple screens to show multiple information, for that we create multiple screen.

For showing information to user we create multiple screen like Main Screen, Listing Screen, Product Detail screen, Cart Screen etc.

In flutter, we are creating screen using dart file. That screen called Routes in flutter. In Android using Java we called Activity and Fragment.

In flutter Navigator is used from First screen to Another screen.

Now we are creating two screen(Route) open from one screen to another screen.

Figure (a)

In figure (a) we are showing two screen from first screen to click on flutter icon open next screen.

Following code is used to navigate from one screen to another screen.

Navigator.push(context, MaterialPageRoute(builder: (context) => FirstScreen()));

Navigator Widget is StatefulWidget in this push method with Context and Route argument, For Route we are using MaterialPageRoute whose required builder for Widget for next screen like we already know in flutter every thing is Widget.

For first screen we are using following code:-

In _openNextScreen() method i put Navigation method to move next screen. In that FirstScreen() is my another screen(Route) to open when user click on flutter icon in screen.

For remove the screen coming from previous screen we use same Navigator class with pop(context) method to remove screen.

Navigator.pop(context);

Like in Android we are using finish() for remove activity from top stack.

This is one way to open one screen from another screen. There is another way to open screen in Flutter. we go through these topic in next articles one by one.

Navigate using named Route.

Pass data or argument to new screen.

Get back result from next screen to back.

I hope this article helps to understand Navigation in Flutter.

--

--

Shivam Sharma
Shivam Sharma

No responses yet