How to Handle Navigation in Flutter

One of the core concepts in all mobile applications is navigation. It allows a user to move between different pages or activities. Navigation increases an app's functionality. It enables developers to include numerous features on different screens.
Prerequisites
This guide assumes that you have a basic understanding of the Flutter framework. You must be familiar with creating a Flutter project, basic Flutter widgets, and layouts. We will also be using Dart in this project. When it comes to the code editor, you can either use Visual Studio Code
or Android Studio
.
Goal
This tutorial focuses on the following areas:
- Navigation and routing.
- Named route in Flutter.
Routes
The ways or courses taken in getting from a point to a destination are called routes. In software development, routes can be seen as directions or paths that a user takes.
Navigation
As stated, we are going to create a very simple and organized named route in Flutter. We will structure our navigation route files in the project folder.
Inside our lib
folder, we will create two
folders; route
, and views
.
In the route
folder, create a file named route.dart
. This file will serve as a controller
for managing the route.
In the views
folder, we will create all the pages
we will be using for our application. This includes home, login, and register pages.
Next, we will create our pages.
In the views
folder, create a new file and name it home.dart
then add the following code.
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// code for the home page layout
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
// code for the button in the home page
child: ElevatedButton(
child: Text('Go to Login page'),
onPressed: null,
),
),
);
}
}
In the code above, we have included an appbar, page title, and button. We will direct the user to another page when the button is clicked.
We will repeat the above code in all our pages.
Create a login.dart
file and include the code below.
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// code for the login page layout
return Scaffold(
appBar: AppBar(
title: Text('Login Page'),
),
body: Center(
// code for the button
child: ElevatedButton(
child: Text("Go to home page"),
onPressed: null
),
),
);
}
}
Create a register.dart
file and include the following code.
import 'package:flutter/material.dart';
class RegisterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// code for the register layout
return Scaffold(
appBar: AppBar(
title: Text('Register Page'),
),
body: Center(
// code for button
child: ElevatedButton(
child: Text("Go to Login page"),
onPressed: null
),
),
);
}
}
Next, we will create our navigation
route. To do that, let's update the route.dart
file with the code below.
import 'package:flutter/material.dart';
// importing our pages into our route.dart
import 'package:flutter_navigation/views/home.dart';
import 'package:flutter_navigation/views/login.dart';
import 'package:flutter_navigation/views/register.dart';
// variable for our route names
const String loginPage = 'login';
const String homePage = 'home';
const String registerPage = 'register';
void login() {}
// controller function with switch statement to control page route flow
Route<dynamic> controller(RouteSettings settings) {
switch (settings.name) {
case loginPage:
return MaterialPageRoute(builder: (context) => LoginPage());
case homePage:
return MaterialPageRoute(builder: (context) => HomePage());
case registerPage:
return MaterialPageRoute(builder: (context) => RegisterPage());
default:
throw ('this route name does not exist');
}
}
We started by importing all pages in the views
folder. Make sure that you use your project name while importing the files.
Next, we defined our route name as a constant
variable, then declared a controller
function to enable us to control the routing flow.
The controller
function requires a setting to be passed in the arguments. The settings
variable has two important parameters, settings.name
, and settings.argument
. We will only use the setting.name
parameter in this tutorial.
Next we will update our main.dart
file with the code below.
import 'package:flutter/material.dart';
// importing our route.dart into our main.dart
import 'route/route.dart' as route;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// code for our main layout
return MaterialApp(
title: 'Flutter navigation',
theme: ThemeData(
primarySwatch: Colors.purple,
),
// code that is setting the first page you will see when you open your app
onGenerateRoute: route.controller,
initialRoute: route.loginPage,
);
}
}
Here we imported the route.dart
file as route
then set the onGenerateRoute
as our controller
function and our initial route as our login page.
Then, we will go to our pages and make a transition between each of them.
To do that, we will import the route.dart
file inside each page in the views
folder, as shown below.
// importing our route.dart file
import 'package:tutorial_app/route/route.dart' as route;
Note
tutorial_app
is the name of my project.
Next, we will replace the null
in our onpressed
function on all pages with the code below.
Ror the homepage:
// code that navigates us to the next page
onPressed: () => Navigator.pushNamed(context, route.registerPage),
For the loginPage:
// code that navigates us to the next page
onPressed: () => Navigator.pushNamed(context, route.homePage),
For the registerpage:
// code that navigates us to the next page
onPressed: () => Navigator.pushNamed(context, route.loginPage),
We will save all files and reload the app. We will then be able to navigate across different pages.
Our final app will look this:
Conclusion
We now have a simple app that has an organized Named Route
navigation. You can download the full project from this GitHub repo.
Using Named Routes
helps us to reduce development time since it eliminates boilerplate code.
Happy coding!
Further reading
- Navigate with named route
- Navigate to a new screen and back
- Clean Navigation in Flutter Using Generated Routes
Peer Review Contributions by: Wanja Mike
