Pass arguments to a named route

The Navigator provides the ability to navigate to a named route from any part of an app using a common identifier. In some cases, you might also need to pass arguments to a named route. For example, you might wish to navigate to the /user route and pass information about the user to that route.

You can accomplish this task using the arguments parameter of the Navigator.pushNamed() method. Extract the arguments using the ModalRoute.of() method or inside an onGenerateRoute() function provided to the MaterialApp or CupertinoApp constructor.

Follow thesse steps to pass arguments to a named route and read the arguments using ModalRoute.of() and onGenerateRoute().

1. Define the arguments you need to pass

First, define the arguments you need to pass to the new route. In this example, pass two pieces of data: The title of the screen and a message.

To pass both pieces of data, create a class that stores this information.

// You can pass any object to the arguments parameter.

// In this example, create a class that contains both

// a customizable title and message.

class ScreenArguments {

  final String title;

  final String message;

 

  ScreenArguments(this.title, this.message);

}






2. Create a widget that extracts the arguments

Next, create a widget that extracts and displays the title and message from the ScreenArguments. To access the ScreenArguments, use the ModalRoute.of() method. This method returns the current route with the arguments.

 

// A Widget that extracts the necessary arguments from

// the ModalRoute.

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),

      ),

    );

  }

}






3. Register the widget in the routes table

Next, add an entry to the routes provided to the MaterialApp widget. The routes define which widget should be created based on the name of the route.

MaterialApp(

  routes: {

    ExtractArgumentsScreen.routeName: (context) =>

        const ExtractArgumentsScreen(),

  },

);






4. Navigate to the widget

Finally, navigate to the ExtractArgumentsScreen when a user taps a button using Navigator.pushNamed(). Provide the arguments to the route via the arguments property. The ExtractArgumentsScreen extracts the title and message from these arguments.

// A button that navigates to a named route.

// The named route extracts the arguments

// by itself.

ElevatedButton(

  onPressed: () {

    // When the user taps the button,

    // navigate to a named route and

    // provide the arguments as an optional

    // parameter.

    Navigator.pushNamed(

      context,

      ExtractArgumentsScreen.routeName,

      arguments: ScreenArguments(

        'Extract Arguments Screen',

        'This message is extracted in the build method.',

      ),

    );

  },

  child: const Text('Navigate to screen that extracts arguments'),

),












Source :

Pass arguments to a named route