Pass Data to Other Screen
Introduction
In previous section, you learned how to move between screens. In this section, you will learn how to send data between screens. This is useful when you want to pass data from one screen to another, such as a user’s name, email, or any other information.
Example 1: Greet User
In this example, you will learn to greet the user by passing their name to the new screen. First, create a simple app with two screens: HomeScreen and GreetScreen.
Step 1: Define Home Screen
This is the main screen of the application. It has a text field to enter the user’s name and a button to navigate to the greet screen.
class HomeScreen extends StatelessWidget {
final TextEditingController _controller = TextEditingController();
HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Greet App')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:[
TextField(
controller: _controller,
decoration: InputDecoration(hintText: 'Enter your name'),
),
ElevatedButton(
child: Text('Greet'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => GreetScreen(name: _controller.text),
));
},
),
],
),
),
);
}
}
Step 2: Define Greet Screen
This screen displays a greeting message to the user. It receives the user’s name as a parameter.
class GreetScreen extends StatelessWidget {
final String name;
const GreetScreen({Key? key, required this.name}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Greet Screen")),
body: Center(child: Text('Hello, $name!')),
);
}
}
Example 2: Pass Product Object Details
In this example, you will learn to pass product object details to the new screen. First, create a simple app with two screens: HomeScreen and ProductScreen.
Step 1: Create a Product Model
First you need to create a simple data model for the product.
class Product {
final String name;
final double price;
Product({required this.name, required this.price});
}
Step 2: Sample Data
Create a list of products to display on the home screen.
final product = Product(name: 'Laptop', price: 1000);
Step 3: Define Product Screen
This screen displays the product details. It receives the product object as a parameter.
class ProductScreen extends StatelessWidget {
final Product product;
const ProductScreen({Key? key, required this.product}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(product.name)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Name: ${product.name}'),
Text('Price: \$${product.price}'),
],
),
),
);
}
}
Step 4: Navigate to Product Screen
Navigate to the product screen and pass the product object as a parameter.
ElevatedButton(
child: Text('View Product'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ProductScreen(product: product),
));
},
),
Example 3: Pass Data Using Named Routes
In this example below, you will learn how to pass arguments to the second screen using named routes.
Defining Routes
First, define the named routes in the MaterialApp widget:
MaterialApp(
title: 'Named Route Navigation',
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/second': (context) => SecondScreen(),
},
);
Passing Arguments
When navigating to the second screen, you can pass arguments using the Navigator.pushNamed method:
Navigator.pushNamed(
context,
'/second',
arguments: 'Hello from the first screen!',
);
And receive the arguments in the SecondScreen widget:
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final String args = ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: Text(args),
),
);
}
}
Example 4: Pass Data Using Named Routes
In this example, you will learn to pass product object details to the new screen using named routes. First, create a simple app with two screens: HomeScreen and ProductScreen.
Step 1: Create a Product Model
First you need to create a simple data model for the product.
class Product {
final String name;
final double price;
Product({required this.name, required this.price});
}
Step 2: Sample Data
Create a list of products to display on the home screen.
final product = Product(name: 'Laptop', price: 1000);
Step 3: Define Routes
Define the routes in the MaterialApp widget.
MaterialApp(
title: 'Named Route Navigation',
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/product': (context) => ProductScreen(),
},
);
Step 4: Navigate to Product Screen
Navigate to the product screen and pass the product object as a parameter.
ElevatedButton(
child: Text('View Product'),
onPressed: () {
Navigator.pushNamed(context, '/product', arguments: product);
},
),
Step 5: Receive Data
Receive the product object in the product screen.
class ProductScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Product product = ModalRoute.of(context)!.settings.arguments as Product;
return Scaffold(
appBar: AppBar(title: Text(product.name)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Name: ${product.name}'),
Text('Price: \$${product.price}'),
],
),
),
);
}
}
Challenge
Create a Flutter app with 2 screens called HomeScreen and ShopScreen. Use named routes to navigate between the screens. Also pass a list of products from the HomeScreen to the ShopScreen. HomeScreen should have a button to navigate to the ShopScreen. The ShopScreen should display a list of products.