Flutter - Send Data to Screen using RouteSettings
Last Updated :
07 Mar, 2025
Interaction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will explore in detail the process of sending data to another screen by building a simple application.
For better understanding, we will build a Task memo app that lists all the pending tasks on the home screen, and when any of the tasks is clicked, a respective detailed description of the task is shown on another page. Here, we will be passing the data from the Home screen (the task that is tapped on) to a description screen.
Steps to Build the Task Memo App
Step 1 : Create a new flutter application
Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.
flutter create app_name
To know more about it refer this article: Creating a Simple Application in Flutter
Step 2 : Creating a Task class
A simple way to define the task class is shown below:
Dart
class Todo {
final String task_name;
final String description;
Todo(this.task_name, this.description);
}
Step 3 : Listing the Tasks
Use the ListView to generate the list of task. For the sake of simplicity we will be creating a list of 10 tasks as follows:
Dart
final todos = List.generate(
10,
(i) => Todo(
'Task $i',
'Task Description $i',
),
),
ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(todos[index].task_name),
);
},
);
Now create a home screen where the list can be displayed using a StatelessWidget as follow:
Dart
class TodosScreen extends StatelessWidget {
final List<Todo> todos;
TodosScreen({
Key? key,
required this.todos,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeeksForGeeks'),
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
body: ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(todos[index].task_name),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(),
settings: RouteSettings(
arguments: todos[index],
),
),
);
},
);
},
),
);
}
}
Step 4 : Designing the Description screen by extracting arguments
Create a page that extracts the task_name (name of the task) and the description of the task from the home screen as an argument using the ModelRoute.of() method as shown below:
Dart
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Cast the received arguments to a Todo type.
final Todo task = ModalRoute.of(context)!.settings.arguments as Todo;
return Scaffold(
appBar: AppBar(
title: Text(task.task_name),
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Text(task.description),
),
);
}
}
Step 5 : Passing Data to the Description page
Now pass the description and task_name as a RouteSettings argument using assigning a callback function to the onTap() function that uses the Navigator.push() method of the Navigator class as shown below:
Dart
ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(todos[index].task_name),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(),
settings: RouteSettings(
arguments: todos[index],
),
),
);
},
);
},
),
Complete Source Code
main.dart:
Dart
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Passing Data',
debugShowCheckedModeBanner: false,
home: TodosScreen(
todos: List.generate(
10,
(i) => Todo(
'Task $i',
'Task Description $i',
),
),
),
));
}
class TodosScreen extends StatelessWidget {
final List<Todo> todos;
TodosScreen({
Key? key,
required this.todos,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeeksForGeeks'),
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
body: ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(todos[index].task_name),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(),
settings: RouteSettings(
arguments: todos[index],
),
),
);
},
);
},
),
);
}
}
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Cast the received arguments to a Todo type.
final Todo task = ModalRoute.of(context)!.settings.arguments as Todo;
return Scaffold(
appBar: AppBar(
title: Text(task.task_name),
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Text(task.description),
),
);
}
}
class Todo {
final String task_name;
final String description;
Todo(this.task_name, this.description);
}
Output:
Similar Reads
Flutter - Send Data to Screen Interaction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will expl
4 min read
Flutter - Pass Data One Screen To Another Screen In this article we gonna know how you can pass the data from one screen to another screen in Flutter. In this example we took two screens one and screen two, In the first screen, you enter the data, and that data you can see on your second screen. This is the main object of this application. If we t
4 min read
Flutter - Return Data from Screen Interaction with UI is an essential part of any application. During the same, there might be a need to return data from the screen. This kind of interaction can range from selecting an option to navigating to different routes through the various buttons in the UI. In this article, we will explore th
4 min read
How to Add Splash Screen in Flutter App? We all have heard of Flutter right, it's a cross-platform application development tool. Flutter can be used to make Android, IOS, and Web applications with just one code base (Dart programming language). In this article let's see how we can add a splash screen to our applications. What is Splash Scr
3 min read
Flutter - Introduction to State Management Using Riverpod Riverpod is a Reactive State-Management and Dependency Injection framework, it uses different providers to let us access and listen to state changes across our app, it is built by Remi Rousselet. If you don't know what is state then I'll recommend you to read this article first as it will be a littl
7 min read