Navigation
Learning Objectives
- You know of the concept of navigation in Flutter and know how to navigate between screens.
- You know how to use the GetX library for navigation in Flutter.
Navigation and screens
Flutter features a stack-based navigation, where screens are pushed on top of a stack and popped from (the top of) the stack. The screen that is on top of the stack is the one that is displayed to the user.
The term screen is used to describe shown content. Screens are widgets. At times, the term view is used interchangeably with the term screen.
Navigation between screens is handled with Flutter’s Navigator class. Navigator provides the methods push and pop to push content on top of the stack and to pop content off the stack, respectively. Content that is pushed on top of the stack is referred to as a route, indicating a path that the user has taken through the application — an instance of a path is created using Flutter’s MaterialPageRoute class.
The following example shows two screens. The first screen is the home screen, which has a button that, when pressed, navigates to the second screen, the secret screen. The secret screen has a button that, when pressed, navigates back to the home screen. In the example, navigation is done by pushing a new route on top of the stack and popping the top route off the stack.
Flutter also provides a way to identify routes with names. This is useful when the application has many screens and the routes have a pattern. For example, if the application has a set of secret screens, the routes could be /secrets/1, /secrets/2, and so on. However, there are limitations to Flutter’s built-in navigation, and for simplicity, we’ll use navigation from GetX.
Navigation and GetX
GetX is a Flutter library that provides navigation and state management functionality. To use GetX in an application, it needs to be added to the dependencies in the pubspec.yaml file of the project.
Information on running projects locally and adding dependencies can be found in the section Local Development Setup.
When GetX is in the project depedencies, it can be used by importing it to the source files with the statement import 'package:get/get.dart' and declaring the application as a GetMaterialApp instead of MaterialApp.
import 'package:flutter/material.dart';
import 'package:get/get.dart';
main() {
runApp(
GetMaterialApp(
home: ...,
),
);
}
// ...GetX provides functions for navigation that are somewhat similar to Flutter’s built-in navigation. The simplest way to navigate between screens is to use the Get.to method and the Get.back methods.
The following example shows a rewrite of the earlier navigation example, where Flutter’s navigation has been replaced with GetX’s navigation.
When creating an application with many screens, it can be useful to define names for the routes that correspond to the screens. With named routes, navigation can be done by referring to the names of the routes instead of creating new routes e.g. with the MaterialPageRoute class.
Defining named routes with GetX is done with the GetPage class, and the set of routes that the application uses is defined in the GetMaterialApp widget. The following example shows how to define named routes with GetX and how to navigate to a named route with the Get.toNamed method.
One of the benefits of named routes is the possibility to pass parameters to the routes. This is useful when the application needs to pass data between screens.
The idea of passing parameters with routes is equivalent to defining path variables in web software development.
In the following example, we define a named route with a parameter and navigate to it with the Get.toNamed method. In the screen that is navigated to, the parameter from the route can be accessed using Get.parameters, which is a map. In the example, the secret screen shows the secret that was passed as a parameter :secretId.
Using named routes, one could, for example, also implement an application that allows the user to navigate forward in a series of steps. The steps could be defined as named routes, and the application could pass the current step as a parameter to the route. This way, the application could always highlight the next step to the user. The following example shows how to implement a simple step application with GetX. In the example, the step is passed as a parameter to the route — if the parameter is not defined (the value is null), the step is set to 0.