Flutter Navigation Tutorial

In this Flutter Navigation Tutorial, we want to have a look at how navigation is done in Flutter. We want to make a small application, where we can navigate from one screen to another. Also, we have a look at how to pass data between the different screens.

Flutter Navigation Tutorial

So first of all, let us create a new project (I am using Android Studio by the way) and also add three dart files with the following names to the lib folder: content.dart, main.dart and newPage.dart.

./lib folder

To the main.dart we want to add a BottomNavigationBar. Besides, if you want to know more about the BottomNavigationBar, please check out my very small tutorial on how to implement that here. So, let us now copy the following code into our main.dart.

After that, we should see the BottomNavigationBar with home, messages and profile as our tabs. Also, we should have a burger menu and a Drawer menu should open if we click on it. So far nothing is working properly, but we will hook it up soon enough.

Implementing the Content of our BottomNavigationBar

To be able to change screens, we need to add some code to the content.dart file. Just copy it for now. It will become clearer later on in the tutorial.

So far, so good. Now you should be able to run the app and also to switch between different screens as well as to open the Drawer menu.


Navigation in the Flutter Navigation Tutorial

Navigation usually is done by pushing and popping onto and from a “stack”. So we push a new page onto the stack, and if we want to go back, we pop it.

There are two main ways to navigate in Flutter. You can either register a route in MaterialApp, or you can push via MaterialPageRoute. We will incorporate both in our tutorial.

Via registered routes

Routed Navigation via Drawer

The first way is to use predefined routes. So, add these lines of code to register a new route in MaterialApp. We call it newPage:

To push our newPage on top of the current one we can use the following code. So, for this tutorial we put it into our Drawer:

Notice the pop before the push here? We need this to pop the Drawer menu before we push the new page on top of it.

Use MaterialPageRoute for Navigation

Using MaterialPageRoute via Drawer

The second way involves MaterialPageRoute. For that, we don’t need to register anything, just put these lines of code into the Drawer as well.

We also Have to Implement our newPage in the Flutter Navigation Tutorial

Next, we need to implement our newPage. Otherwise, we won’t be able to navigate to it. In it, we add a button to go back to the previous page. In onPressed() we pop this page and go back to the previous one.

So far so good. Now you should be able to navigate the tutorial app: You can change the screen via the BottomNaviagtionBar or open the Drawer menu and go to the newPage.

Passing Data

When navigating an app you most probably want to pass data between the different screens. So, we want to implement exactly that.

Passing Data when Pushing a Page

First, we want to update our newPage.dart, so that we can pass a string to it. Also, notice that we added a new button too. And do not forget the Text(status) line, since we want to proof, that we got the string from the getBackString page!

Be aware, that this tutorial only covers passing data when navigating via MaterialPageRoute. But, it is also possible to pass data with defined routes, though it is a little more complex. Check out the official documentation for more information on that.

Of course, we now have to update the main.dart file to provide a string for the requirement of our newPage.

Get back data when popped

For the clickGetBackString() method, we add the following code to our newPage.dart. What it does is it waits for getting a string back from the page, that we jet have to make.

So, let us add a new dart file with the name getBackString.

./lib folder

As the name suggests, we want to get back a string from that new screen. Add the following to the file:

Notice the WillPopScope? This way we can overwrite how the back button is handled. Actually, we have to overwrite it in our case since a string is expected.

Get back Data

That is it with the Flutter Navigation Tutorial

That is more or less it. So, now you should have a functioning navigation-app. And I hope you learned something. You may be interested in other tutorials I made, for example on how to authenticate in Flutter, or how to use Firestore with Flutter. Or maybe you want to know how dynamic localization works. Also, I would love to hear feedback from you.

Originally published at www.gotut.net.




In my spare time I work on Timeless Adventure — a fantasy adventure game

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Visual Studio Entity Framework Or not what diff?

And what you should use instead

Some key features of Azure Functions include:

Collection Select and Nested URLs

Chapter 2 —Data Models and Query Languages

The District Weekly — April 10th

Why Node Was Easily the Better Choice over Go For My Open Source CLI App.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Free Time Dev

Free Time Dev

In my spare time I work on Timeless Adventure — a fantasy adventure game

More from Medium

Add Multi languages to your app using GetX

Thumbnail about this tutorial content

Using Hive In Your Flutter Mobile Project

Flutter | Local Notifications Custom Sound

How to use Flutter Time Series Charts with Firebase