3.0 Introduction

Routing is an essential of any mobile application. Luckily for us, Flutter has some convenient features to help with routing.

3.1 Flutter Navigator

The most basic way to add a route is by using Flutter’s built in Navigator object along with an ElevatedButton object. The most basic way of routing is simply by using the .push method like so:

....
	ElevatedButton(
		child: Text("GO TO HELP"),
		onPressed: () {
			Navigator.of(context).push(
				MaterialPageRoute(builder: (context) => Help())
			);
		},
	),
....

<aside> ❗ Note: here we are using the Material Design Library so can make use of the MaterialPageRoute function to get the page route.

</aside>

<aside> 💡 This method of changing the route keeps ‘history’: the app remembers which pages you have been to already.

For methods of changing the route that don’t preserve history, look at pushAndRemoveUntil and pushReplacement.

</aside>

ElevatedButton is the default Button object in Flutter. We have set two properties for it, it’s child which is a Text element, and the onPressed property which is a function that activates when the button is pressed.

We’re making use of the Navigator push function change the current route to the Help widget.

https://zapp.run/edit/flutter-zu3a063lu3b0?lazy=false&split=50&entry=lib/main.dart&file=lib/main.dart

3.2 Flutter’s History Stack

Every time you go to another page, you are affecting the history stored by the Flutter’s Navigator. The Navigator stores history in a stack as shown in the diagram below.