An app with only one screen isn’t fun, so lets learn about navigation in Flutter. In this post you are going to learn about Navigator, setting up routes and pass information from one screen to another. 

Navigation is a key element in apps as you only have limited space and therefor needs to navigate between screens often. We will start be getting the terminology in place. In Flutter screens and pages is called routes. If you already are familiar with developing Android or iOS apps, then you might know that in android a route is an activity and in iOS apps it’s a ViewController. But as everything else in Flutter route is a widget.

Test the different navigation possiblities in your own app, while reading the post. This will help you to understand which option is best suited for your application. If you haven’t already started a Flutter project, you can follow my guide Creating a new Flutter project.

Navigator simple

If it’s your first time using Flutter and you want a simple way to navigate between two screens. Then, you can use this simple code snippet to navigate between two screens.

Navigate to a new screen: Navigator.push()

Navigate back to the previous page: Navigator.pop()

This is a really simple way to navigate between screens, but it will result in a lot of duplication if you want to navigate to the same screens in other screens. Furthermore, if your screens widgets are build in different files, then you have to import the file that include the screen you want to navigate to. So, are you building a larger application, then read further on and I will tell you about some other more scalable solutions. 

Named Routes with Navigator

Are you building an application containing more than two screens, then named routes is your go to. Here you define the routes, just like when you navigate on a website. “/” leads to the homepage and “/About” lead to your about page. You define the routes in MaterialApp as shown below.

InitialRoute defines the home page for the app and routes defines the different screens. When you want to navigate between views you will now replace .push with .pushNamed as seen below. Tip: When using named routes you don’t need to define Home in MaterialApp.

If you have many screens/routes, then I will recommend that you create a separate file called router.dart and define your different routes there instead. This will make your code much easier to read. I will explain it in details in the following sektion. 

Navigation for scalable Flutter apps

Lets look at how you can setup your navigation in Flutter, so your app is ready for scale. We will be using named routes as explained above, but we will add the property onGenerateRoute().

onGenerateRoute() basically lets you create a function that calls the route settings.  It’s called in MaterialApp where it replaces routes and instead call the new router file. Which we are going to create in a bit.

If you have read my previous post, you know that I’m building a Flutter app that will present statistics for my company DecorRaid. We will continue working on this app, for this example. At this state my app only have one screen, statsView. That’s why I have used the simple navigation of just setting Home: StatsView(). Notice how I have to import the stats.view.dart file to be able to navigate to it.

I’m planning that my app should include a lot more screens, as you properly also are for your app. So, to make it scalable from the beginning we are going to use onGenerateRoute().

Setup

But first we need some pages to navigate between. I have my statsView, but I will create a Home view as well. For now I will just create it in the main.dart file and add text widget.

If you just created you Flutter project, you might want to have a look at my post about setting up a scalable folder structure. 

Routing Setup

Now it’s time to setup routing between your new screens. We will start be creating a new file called router.dart. Within this file we will define the settings for our navigation. If you have followed my example on how to structure your Flutter app folder, then you can add the file to ui > shared > utils.

In the file we are going to create a RoutePaths class. Because we are defining a class we don’t need to add “/” before the name of where we are navigating too. 

Furthermore, we are going to define a Router class that defines the function Route<dynamic> and takes in RouteSettings which onGenerateRoute() needs. Within this function we will define the different navigation cases. In our example we have Home and StatsView we want to navigate too. The settings provides two keys we can use, the name and the arguments. In this example we will only use the name as it’s the one used to determine which view to return. We will get back to arguments later in the post.

Now to the last part. Go to main.dart and to your MaterialApp where we will remove home and declare onGenerateRoute and initialRoute instead. 

Remember to import your newly created router.dart file. In initialRoute you will declare which view will be your starting view and afterwards pass the generateRoute function to onGenerateRoute. 

Navigation

All your basic settings for using onGenerateRoute is set, so now when you want to navigate between views, you can use:

Navigator.pushNamed(context, Home); 

Navigator.pushNamed(context, StatsView);

Just remember everytime you add a new view you have to add the route in Router.dart.  

Pass arguments with named routes

Now we have learned how we can navigate between different screens in Flutter, but what if we want to pass information from one screen to another?

As an example lets make our ViewStats take in a string as a parameter.

Flutter is all about widgets, so that’s where we are going to begin out journey into coding in Flutter. This it going to be a basic intro to Flutter widgets, where we are going through what a widget is and what type of widgets that are available. You can import prebuilt widgets or build your own from scratch. We are going to take it step-by-step, but in the end you will be able to built you own widget. 

What is a Flutter widget?

Flutter is a framework for building beautiful UI, which is build out of widgets. A widget describes what the view should look like and if it should change based on a state like pressing a button. When a widget’s state changes, the widget is rebuild. The smart thing is, that a view often consist of multiple widgets and then if one of the widgets in the view changes, only that specific widget has to be updated/reloaded. This makes the user experience really smooth and fast.

When you initiate a new Flutter project it already consist of widgets. Below is shown a simple function runApp() that calls the given widget and makes it the root of the widget tree. In the simple example the widget tree consists of two widgets, the Center widget and its child, the Text widget. It’s called a widget tree as its an easy way to understand how the widgets are related. In this case the Center widget is the main branch and then it has a child within, which is a Text widget. The Center widget tells that whatever is inside that widget has to be centered. The Text widget allows us to present a text string. We can add style to the text widget if like to make it bold or change the color or fonts etc. 

Types of Flutter widgets – Stateless and Stateful

Before starting to build a widget you need to thing of the purpose of the widget. Is it going to be static or dynamic?

Static layout is not going to change after its build, like a your title or an image. You wouldn’t want your title to change based on user activity, right?

Dynamic layout is a layout that has the ability to change, like a button pressed that for instance add a product to your basket in a webshop.

These are the two different cases your should thing of, to figure out if it’s a StatelessWidget or a StatefulWidget you should use. Your views are often a StatelessWidget, like MaterialApp which is the root of your application. This is not going to change based on user activity, whereas a widget within a view might change and therefor is a StatefullWidget. With this basic introduction to Flutter widgets, we can try to build our own widget. 

Build your own Flutter widget

You will come across multiple widgets and likely make you own widgets as well. When you first get a hang of it, you will really appreciate the world of widgets. Let’s take a look at how you create a widget for your Flutter app.

You probably want to make a beautiful view with different functionalities. To do that we can break a view into widgets. Below is a view that I would like to build. The layout is for a Flutter webpage, but as Flutter code can be used for app and web development, the same code is used. First thing is the headline. A headline is usually text, so here we will use a basic Text Widget. But what about the rest if the UI? We are going to look at the container containing Key Perfomance Indicators (KPIs) for DecorRaid. In this tutorial we are only going to focus on the UI, but I will show in a later post, how we are going to connect Flutter with a backend. 

First step create a new view

To keep an overview of the different widgets and views of your app, start by structuring you folder. You can read how to in my previous post. In the Views folder create a folder called stats. Within that folder we create a dart file called stats.view.dart. This file is where we are going to combine the different widgets that define the UI of this specific view.  As the view is going to be static we will use a StatelessWidget.

Note: To show this view when running your app go to the main.dart file and add the view where it stands home:. Remember to import the view first.

Second Step build a StatelessWidget

Within the stats.view.dart we will define the StatsView which extends the StatelessWidget. A StatelessWidget always consist of @override wherein you build your widget. It’s within the build() method that you define your layout. If you go to the main.dart you can see that the build functions return MaterialApp which is the primary widget of your Flutter app. But as we are building a specific view within the app, we will return another widget. I have chosen the Scaffold widget, as it returns a basic UI for showing a drawer, snackBar and buttons. 

Within the Scaffold widget the appBar is defined with a Text widget and within the body we can add the content for our view. 

Lets build our own widget that can be displayed within the body instead of the Text widget with “Hello World”. 

Third step build your own statelesswidget

To make the code organized we will create a new file in the folder lib > ui > shared > widgets called WKpiTracker.dart.  I add a W in the beginning to make myself aware that it’s a shared widget. I’m going to use this widget later on in another views of my app, that’s way I add it to the shared widget folder. 

The widget is a KPI tracker that show the KPI name and the responding value. This is the widgets variable, but a variable could also be a color if you want it to display a different color depending on the view or type of KPI. This is your widget, so you decide.

With the variables ready, we can build the UI.

Build the UI of your Flutter widget

First, we are building the box which is called a Container. Within the container you can customize the layout. If you have any questions to the code or styling then please add a comment below. I’m not going to go into details about the styling. But here you have the code and then you can copy it and change the format as you desire.