Navigation

Screens, paths and routes

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.

Each screen is linked to a String (often formatted in a similar way to paths in web applications). For example, a home screen would be at path /. Mappings between paths and screens are called routes; when creating a route mapping, each mapping has the BuildContext for building screens.

The following example shows an application with one path and one screen. There is just one route: the path / leads to the creation of a widget called "HomeScreen".

When we run the application, we see a screen with the text "Show secret". Note that instead of using the argument home to define the shown content with MaterialApp, the shown content is looked up from the routes. The screen corresponding to the path / is shown at first.

Popping and pushing screens

Navigation between routes is handled with the class Navigator. Navigator allows us to pop content off the stack and to push a named route on top of the stack.

Pop content off the stack

The following example shows an application with a button that allows popping the shown screen off the stack. The key call that leads to the event is Navigator.pop(context). Note that when you press the button in the example code, the stack will end up empty, which means that the screen will be empty.

Push content on top of the stack

Screens are pushed to the top of the stack using the call Navigator.pushNamed(context, "/path"), where /path describes the path that will be pushed on top of the stack. The following example shows an application with two paths, / and /secret, where / corresponds to the HomeScreen widget and /secret to the SecretScreen widget.

The HomeScreen widget allows accessing the secret screen by pressing a button, while the secret screen allows hiding the secret.

Routes and Navigator

In brief, when using Flutter's Navigator widget, we use the method pushNamed to push a named route (and the corresponding screen) on top of the current stack of screens, while the method pop is used to remove the topmost screen from the stack of screens.

Routes and corresponding screens are defined by passing a configuration to the MaterialApp class using the argument routes. This is demonstrated in the following example with three screens: one home screen and two secret screens. Navigating to the secret screens is done from the home screen, while the secret screens link back to the home screen.

There is a considerable downside in the extensibility of the above example, however. What if, say, we would wish to have a third secret screen or even more secret screens? With the present approach, we would have to define each route manually, even though the routes have a pattern: the third secret screen would be at /secrets/3 and e.g. a tenth secret screen would be at /secrets/10.

Ideally, we would have a possibility for defining routes, where content from the routes could be used as arguments for creating screens. We'll next look at a library called go_router that can be used to achieve this.