Passing Arguments through Flutter Navigation

Passing arguments to a flutter navigation is important as it allows for more dynamic content, just as you might find with a dynamic website.

To pass arguments, we will need to build a class to hold the arguments, and a Widget that can extract them. Then we will need to update the navigation. We will build off the named routes from our last example.

Building an Argument Class

This class is fairly simple as it is just going to store information we want to pass back and forth. For this example, we will have two properties, a title and a message to store. You can see the example below.

class ScreenArguments {
  final String title;
  final String message;

  ScreenArguments(this.title, this.message);
}

You of course could have more or less properties in your class depending upon what you might need.

For organization purposes, I’m going to put this into a new file called arguments.dart and import it into our main file.

Creating a Widget that can Read Arguments

Now we need to be able to read this argument class. To do that, we need to create a new widget. I’m going to do this in the arguments.dart file as well, just to keep the logic together.

To do this, I’m going to use the following code, then I want to explain the new parts to you.

class ExtractArgumentsScreen extends StatelessWidget {
  const ExtractArgumentsScreen({Key? key}) : super(key: key);

  static const routeName = '/extractArguments';

  @override
  Widget build(BuildContext context) {
    // Extract the arguments from the current ModalRoute settings and
    // cast them as ScreenArguments.
    final args = ModalRoute.of(context)!.settings.arguments as ScreenArguments;

    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
      ),
      body: Center(
        child: Text(args.message),
      ),
    );
  }
}

Notice that you are taking the ModalRoute, and getting it’s settings. From it’s settings are the arguments which is put into a variable called args.

When you return the Scaffold, you are creating elements whose text and title come directly from the arguments that were passed in.

Adding the Dynamic Route

Now we will need to add the new route to our application. Notice we will put in the <Widget>.routeName which is associated with the Widget. Remember, we created that property, so it won’t exist for all widgets.

We could use a hard coded route name like we have before, but this is another option if you prefer, and if the Widget updates it, it only needs to be updated in that one location.

void main() {
  runApp(MaterialApp(
    title: 'Navigation Example',
    initialRoute: '/',
    routes: {
      // When navigating to the "/" route, go to the RouteOne widget.
      '/': (context) => const RouteOne(),
      // When navigating to the "/second" route, go to the RouteTwo widget.
      '/second': (context) => const RouteTwo(),
      '/third': (context) => const RouteThree(),
      ExtractArgumentsScreen.routeName: (context) =>
        const ExtractArgumentsScreen(),
    },
  ));
}

Adding the Navigation

Finally we will need to add the navigation. This will be a button that we press to go to the new page/route.

In it we will define the values for the arguments that are being passed in. This is going to be in the main.dart file, and inside the RouteOne Wdiget.

ElevatedButton(
              onPressed: () {
                // Taps the button, and navigate to a named route
                // and provide the arguments as an optional parameter.
                Navigator.pushNamed(
                  context,
                  ExtractArgumentsScreen.routeName,
                  arguments: ScreenArguments(
                    'Sample Extract Arguments Screen',
                    'This message is extracted in the build method.',
                  ),
                );
              },
              child: const Text('Navigate to screen that extracts arguments'),
            ),

This code looks familiar to what we’ve seen before for the most part. We have a button, and when pressed, it sends the info new route.

Using it as a Template

The nice thing with this, is to add new routes (screens) you can use this as a template. That means adding additional “screens” by changing what is passed in. Look at the code below, it is all that is needed for two more buttons on the RouteOne Screen, which gives us two new screens.

That also means that it can be used to pass in information from a list page to a detail page.

ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  ExtractArgumentsScreen.routeName,
                  arguments: ScreenArguments(
                    'Second Sample Arguments Screen',
                    'Another message is extracted in the build method.',
                  ),
                );
              },
              child: const Text('Argument Example 2'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  ExtractArgumentsScreen.routeName,
                  arguments: ScreenArguments(
                    'Final Arguments Screen',
                    'The last message.',
                  ),
                );
              },
              child: const Text('Argument Example 3'),
            ),

Passing Arguments through Flutter Navigation was originally found on Access 2 Learn