Outline
When we use the navigator to change the screens, sometimes, we need to pass some parameters to the next screen. In this blog post, we will see how to pass parameters via the navigator in this case.
You can see full source code of this blog post on the link below.
Prepare project
Let’s see how to pass parameters via the navigator when we move the screen via an example. Execute the command below to create a new project.
flutter create parameters
Configure Navigator and Screens
To configure the navigator, first, open lib/main.dart file and modify it like the below.
import 'package:flutter/material.dart';
import 'package:parameters/home.dart';
import 'package:parameters/second.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: 'home',
routes: {
'home': (context) => const Home(),
'second': (context) => const Second(),
},
);
}
}
We’ll create the screen widgets of home.dart and second.dart files later. Import the screen widgets like the below.
...
import 'package:parameters/home.dart';
import 'package:parameters/second.dart';
...
And then set them for the navigation.
...
initialRoute: 'home',
routes: {
'home': (context) => const Home(),
'second': (context) => const Second(),
},
...
Pass parameters
To make home screen widget that is first screen, create the lib/home.dart file and modify it like the below.
import 'package:flutter/material.dart';
import 'package:parameters/second.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('HOME'),
),
body: Center(
child: TextButton(
child: Text('Go to Second screen'),
onPressed: () {
Navigator.pushNamed(
context,
'second',
arguments: SecondScreenArguments(number: 5),
);
},
),
),
);
}
}
Let’s see the details about going to the second screen. You can see the following code for it.
...
Navigator.pushNamed(
context,
'second',
arguments: SecondScreenArguments(number: 5),
);
...
SecondScreenArguments is a class for the parameters that we will create in the second.dart file like the below.
...
class SecondScreenArguments {
final int number;
SecondScreenArguments({required this.number});
}
...
Like this, we should define the type of the parameters, and pass it to arguments of Navigator.pushNamed.
Get parameters
Next, let’s create the second screen widget to get the parameters from the home widget. Create the lib/second.dart file and modify it like the below.
import 'package:flutter/material.dart';
class SecondScreenArguments {
final int number;
SecondScreenArguments({required this.number});
}
class Second extends StatelessWidget {
const Second({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final args =
ModalRoute.of(context)!.settings.arguments as SecondScreenArguments;
return Scaffold(
appBar: AppBar(
title: Text('SECOND'),
),
body: Center(
child: Text('${args.number}'),
),
);
}
}
As you saw above, we need to define the parameters type, so create the SecondScreenArguments class in here.
...
class SecondScreenArguments {
final int number;
SecondScreenArguments({required this.number});
}
...
And the, to get the parameters, we can use ModalRoute.of(context)!.settings.arguments with the dfined type like the below.
...
final args = ModalRoute.of(context)!.settings.arguments as SecondScreenArguments;
...
Lastly, we can access the parameters like args.number for using it.
...
child: Text('${args.number}'),
...
Completed
Done! we’ve seen how to pass parameters via the navigator in Flutter and how to use it.
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
