Flutter - Arguments in Named Routes

Navigating between the various routes (i.e, pages) of an application in Flutter is done with the use of Navigator. The Navigator uses a common identifier to transition between routes. One can pass arguments to these routes using the arguments parameter of Navigator.pushNamed() method. Arguments can be extracted using the ModalRoute.of() method or using the onGenerateRoute function.

In this article, we will explore the approaches of argument extraction using the ModalRoute.of() method and the onGenerateRoute function.

Steps to Implement Arguments in Named Routes

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Design the Argument

Here, we will pass a single piece of data as an argument by designing an Argument class as follows:

Step 3: Creating a Widget

Now make a widget the extract and displays the title_bar and text_message of the Argument Class and use the ModelRouteof() method to extract the argument as shown below:

Step 4: Registering the widget

To register the newly created widget to the routes table use the following:

Step 5: Transition

On tap of the elevated button that we will add on the screen, it should transition to another screen and display the extracted text_message and the title_bar. To do so, use the following:

To know more about ElevatedButton in flutter refer this article: Flutter – ElevatedButton Widget

Complete Source Code

main.dart:

Output: