20

Mar

Flutter Passing Arguments To A Named Route

Flutter Passing Arguments To A Named Route

0

We all know that The Navigator has the ability to navigate to a named route from any part of an app. In some cases, what happens is you may also need to pass arguments to a named route. For example, If you want to navigate to the /user/payment routes and pass information about the user Or payment details to that route.

In Flutter, you can perform this task by providing additional arguments to the Navigator.pushNamed method. You can extract the arguments by using the ModalRoute.of method or inside an onGenerateRoute function provided to the MaterialApp or CupertinoApp constructor.

Passing Arguments To A Named Route In Flutter App:

Define the arguments you need to pass
Create a widget that extracts the arguments
Register the widget in the routes table
Navigate to the widget

Define the arguments you need to pass :

First of all, define what arguments you need to pass. In this example, we are passing two pieces of data: one is The title of the screen and second one is a message.

For this we need to 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);
}

Now, we have to create a widget that extracts the passed arguments and displays it i.e the title and message from the ScreenArguments. To get access the ScreenArguments, we need to use the ModalRoute.of method. This method will returns the current route with the passed arguments.

// A Widget that extracts the necessary arguments from the ModalRoute.
class ExtractArgumentsScreen extends StatelessWidget {
static const routeName = '/extractArguments';

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

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

Register the widget in the `routes` table:

Now we need to add an entry OR register to the routes provided to the MaterialApp Widget. This routes define which widget should be created based on the name of the route.

MaterialApp(
routes: {
ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
},
);

Lastly,we have to navigate to the ExtractArgumentsScreen when a user taps a button using Navigator.pushNamed method. Provide the arguments to the route via using the arguments property. The ExtractArgumentsScreen method extracts the titleand message from these arguments.

// A button that navigates to a named route that. The named route
// extracts the arguments by itself.
RaisedButton(
child: Text("Navigate to screen that extracts arguments"),
onPressed: () {
// When the user taps the button, navigate to the specific rout
// and provide the arguments as part of the RouteSettings.
Navigator.pushNamed(
context,
ExtractArgumentsScreen.routeName,
arguments: ScreenArguments(
'Extract Arguments Screen',
'This message is extracted in the build method.',
),
);
},
);

Alternatively, we also extract the arguments by using `onGenerateRoute() method`:

Instead of extracting the arguments directly inside the widget, we can also extract the arguments inside anonGenerateRoute function and then pass them to a widget.

The onGenerateRoute function creates the correct route based on the given RouteSettings.

MaterialApp(
// Provide a function to handle named routes. Use this function to
// identify the named route being pushed and create the correct
// Screen.
onGenerateRoute: (settings) {
// If you push the PassArguments route
if (settings.name == PassArgumentsScreen.routeName) {
// Cast the arguments to the correct type: ScreenArguments.
final ScreenArguments args = settings.arguments;

// Then, extract the required data from the arguments and
// pass the data to the correct screen.
return MaterialPageRoute(
builder: (context) {
return PassArgumentsScreen(
title: args.title,
message: args.message,
);
},
);
}
},
);

Complete example for Flutter Passing Arguments To A Named Route:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Provide a function to handle named routes. Use this function to
// identify the named route being pushed and create the correct
// Screen.
onGenerateRoute: (settings) {
// If you push the PassArguments route
if (settings.name == PassArgumentsScreen.routeName) {
// Cast the arguments to the correct type: ScreenArguments.
final ScreenArguments args = settings.arguments;

// Then, extract the required data from the arguments and
// pass the data to the correct screen.
return MaterialPageRoute(
builder: (context) {
return PassArgumentsScreen(
title: args.title,
message: args.message,
);
},
);
}
},
title: 'Navigation with Arguments',
home: HomeScreen(),
);
}
}

class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// A button that navigates to a named route that. The named route
// extracts the arguments by itself.
RaisedButton(
child: Text("Navigate to screen that extracts arguments"),
onPressed: () {
// When the user taps the button, navigate to the specific route
// and provide the arguments as part of the RouteSettings.
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ExtractArgumentsScreen(),
// Pass the arguments as part of the RouteSettings. The
// ExtractArgumentScreen reads the arguments from these
// settings.
settings: RouteSettings(
arguments: ScreenArguments(
'Extract Arguments Screen',
'This message is extracted in the build method.',
),
),
),
);
},
),
// A button that navigates to a named route. For this route, extract
// the arguments in the onGenerateRoute function and pass them
// to the screen.
RaisedButton(
child: Text("Navigate to a named that accepts arguments"),
onPressed: () {
// When the user taps the button, navigate to a named route
// and provide the arguments as an optional parameter.
Navigator.pushNamed(
context,
PassArgumentsScreen.routeName,
arguments: ScreenArguments(
'Accept Arguments Screen',
'This message is extracted in the onGenerateRoute function.',
),
);
},
),
],
),
),
);
}
}

// A Widget that extracts the necessary arguments from the ModalRoute.
class ExtractArgumentsScreen extends StatelessWidget {
static const routeName = '/extractArguments';

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

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

// A Widget that accepts the necessary arguments via the constructor.
class PassArgumentsScreen extends StatelessWidget {
static const routeName = '/passArguments';

final String title;
final String message;

// This Widget accepts the arguments as constructor parameters. It does not
// extract the arguments from the ModalRoute.
//
// The arguments are extracted by the onGenerateRoute function provided to the
// MaterialApp widget.
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),
),
);
}
}

// 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);
}

Congratulations You Have Learned Flutter Passing Arguments To A Named Route…!!!

If It Is Helpful Share It With Your Friends…!!!

Leave a Reply Cancel Reply