7.3. Navigation and routing in Flutter: Passing parameters between screens

Navigation and routing are essential components of building multiscreen applications. Flutter, with its Dart language, provides an efficient and effective way to manage navigation and routing in your apps. Let's dive deep into the subject and understand how passing parameters between screens can be accomplished in Flutter.

In Flutter, navigation and routing are handled by a class called Navigator. The Navigator works like a stack, where each route (or screen) is stacked one on top of the other. When a user opens an application, the first screen they see is called the home or "home" route. From there, each new screen the user navigates to is stacked on top of the initial route.

Passing parameters between screens in Flutter is a simple and straightforward process. Parameters are passed as arguments to the Navigator.push() function. The push() function accepts two parameters: the current context and the new route. The new route is an instance of MaterialPageRoute, which in turn takes a builder parameter. The builder parameter is a function that returns a new widget, which is the new screen the user will be navigated to.

For example, if we want to pass a "username" parameter to a new screen, we can do it as follows:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => NewScreen(username: 'John Doe'),
  ),
);

In the example above, we are passing the "username" parameter to the new screen "NewScreen". The parameter is then accessed on the new screen using the widget.username syntax.

In addition to passing parameters to new screens, Flutter also allows data to be passed back from the new screen to the previous screen. This is done using the Navigator.pop() function. The pop() function accepts two parameters: the current context and the data to be returned.

For example, if we want to return a "success" value from the new screen to the previous screen, we can do it like this:

Navigator.pop(context, 'success');

In the example above, we are returning the value "success" for the previous screen. The returned value can then be accessed on the previous screen using the Navigator.push() function.

For example, we can do something like:

final result = await Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => NewScreen(username: 'John Doe'),
  ),
);

if (result == 'success') {
  // Do something
}

In the example above, we are expecting a return value from the new screen. If the returned value is "success", then we do something.

In short, navigation and routing in Flutter is handled by the Navigator class, which works like a stack. Passing parameters between screens is done through the Navigator.push() and MaterialPageRoute() functions, while passing data back to the previous screen is done through the Navigator.pop() function.

With these tools in hand, you can create complex and advanced Flutter applications with multiple screens and passing parameters between them. Navigation and routing are fundamental to building Flutter apps, and understanding how they work is essential to becoming an effective Flutter developer.

Next page of the Free Ebook:

89Navigation and routing in Flutter: Navigation with named routes

3 minutes