Flutter - Arguments in Named Routes - GeeksforGeeks

12 Apr, 2021
Navigating between the various routes(ie, 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. We will do so by implementing both of them in a simple application. To do so follow the below steps:
Design the arguments that are to be passed
Create a widget that extracts the argument
Add the widget to the route table
Transition to the widget
Let’s discuss the above steps in detail:
Here we will pass a single piece of data as an argument by designing an Argument class as follows:
Dart
class Arguments {  final String title_bar;  final String text_message;   Arguments(this.title_bar, this.text_message);}
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:
Dart
class ExtractArgumentsScreen extends StatelessWidget {  static const routeName = '/extractArguments';   @override  Widget build(BuildContext context) {     final Arguments args = ModalRoute.of(context).settings.arguments;     return Scaffold(      appBar: AppBar(        title: Text(args.title_bar),      ),      body: Center(        child: Text(args.text_message),      ),    );  }}
To register the newly created widget to the routes table using the following:
Dart
MaterialApp(  routes: {    ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),  },);
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:
Dart
ElevatedButton(  child: Text("Extracted through modelRouteof() method"),  onPressed: () {     Navigator.pushNamed(      context,      ExtractArgumentsScreen.routeName,      arguments: ScreenArguments(        'Extract Arguments Screen',        'Extracted through modelRouteof() method',      ),    );  },),
Complete Source Code:
Dart
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(        onGenerateRoute: (settings) {          if (settings.name == PassArgumentsScreen.routeName) {            final ScreenArguments args = settings.arguments;            return MaterialPageRoute(              builder: (context) {                return PassArgumentsScreen(                  title: args.title,                  message: args.message,                );              },            );          }          assert(false, 'Implementation ${settings.name}');          return null;        },        title: 'Arguments in named routes',        home: HomeScreen(),        routes: {          ExtractArgumentsScreen.routeName: (context) =>              ExtractArgumentsScreen(),        });  }} class HomeScreen extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('GeekForGeeks'),        backgroundColor: Colors.green,      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: <Widget>[            ElevatedButton(              child: Text("Extracts arguments"),              style: ButtonStyle(                backgroundColor:MaterialStateProperty.all<Color>(Colors.green),              ),              onPressed: () {                Navigator.pushNamed(                  context,                  ExtractArgumentsScreen.routeName,                  arguments: ScreenArguments(                    'Extract Arguments Screen',                    'Extracted in the build method.',                  ),                );              },            ),            // on tap navigate to named route            ElevatedButton(              child: Text("Accepts arguments"),              style: ButtonStyle(                backgroundColor:MaterialStateProperty.all<Color>(Colors.green),              ),              onPressed: () {                // on tab change route                Navigator.pushNamed(                  context,                  PassArgumentsScreen.routeName,                  arguments: ScreenArguments(                    'Accept Arguments Screen',                    'Extracted in the onGenerateRoute function.',                  ),                );              },            ),          ],        ),      ),    );  }} class ExtractArgumentsScreen extends StatelessWidget {  static const routeName = '/extractArguments';   @override  Widget build(BuildContext context) {     final Arguments args = ModalRoute.of(context).settings.arguments;     return Scaffold(      appBar: AppBar(        title: Text(args.title),      ),      body: Center(        child: Text(args.message),      ),    );  }} //Widget to accept argumentsclass PassArgumentsScreen extends StatelessWidget {  static const routeName = '/passArguments';   final String title;  final String message;    const PassArgumentsScreen({    Key key,    @required this.title,    @required this.message,  }) : super(key: key);   @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(title),      ),      body: Center(        child: Text(message),      ),    );  }}  class Arguments {  final String title_bar;  final String text_message;   ScreenArguments(this.title_bar, this.text_message);}
 
 
Output:
 
Media error: Format(s) not supported or source(s) not found
 
arorakashish0911
android
Flutter
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Listview.builder in Flutter
Flutter - DropDownButton Widget
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - BoxShadow Widget
Flutter - Checkbox Widget
Flutter - Flexible Widget