Flutter – Send Data to Screen

12 Jan, 2022
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(ie, page). In this article, we will explore in detail the process of sending data to another screen by building a simple application.
For the purpose of better understanding, we will build a Task memo app that lists all the pending tasks on the home screen and when clicked on any of the tasks 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.
To build the task memo app follow the below steps:
Create a Task class
List the tasks on the home screen
Design a screen that displays the description of the task
Pass data to the tapped task to the description screen
Let’s look into the task in detail.
A simple way to define the task class is shown below:
Dart
class Task {  final String task_name;  final String description;    Task(this.task_name, this.description);}
Use the ListView to generate the list of tasks. For the sake of simplicity we will be creating a list of 10 tasks as follows:
Dart
final tasks = List<Task>.generate(  10,  (i) => Task(    'Task $i',    'Task Description $i',  ),);  ListView.builder(  itemCount: tasks.length,  itemBuilder: (context, index) {    return ListTile(      title: Text(tasks[index].task_name),    );  },);
 Now create a home screen where the list can be displayed using a StatelessWidget as follows:
Dart
class TodosScreen extends StatelessWidget {  final List<Todo> todos;    TodosScreen({Key key, @required this.tasks}) : super(key: key);    @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('GeeksForGeeks'),        backgroundColor: Color.green,      ),        body: ListView.builder(        itemCount: todos.length,        itemBuilder: (context, index) {          return ListTile(            title: Text(tasks[index].task_name)          );        },      ),    );  }}
Again use the StatelessWidget to create a route for the description page. The titlebar of the screen should show the task_name (name of the task) and the body should consist of the description of the task as shown below:
Dart
class DetailScreen extends StatelessWidget {    final Task task;    DetailScreen({Key key, @required this.todo}) : super(key: key);    @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(task.task_name),      ),      body: Padding(        padding: EdgeInsets.all(16.0),        child: Text(task.description),      ),    );  }}
Here we will assign a callback function to the onTap() function that uses the Navigator.push() method of the Navigator class to pass the data to the description screen as shown below:
Dart
ListView.builder(  itemCount: todos.length,  itemBuilder: (context, index) {    return ListTile(      title: Text(tasks[index].task_name),      onTap: () {        Navigator.push(          context,          MaterialPageRoute(            builder: (context) => DetailScreen(task: tasks[index]),          ),        );      },    );  },);
Complete Source Code:
Dart
import 'package:flutter/foundation.dart';import 'package:flutter/material.dart';  class Task {  final String task_name;  final String description;    Task(this.task_name, this.description);}  void main() {  runApp(MaterialApp(    title: 'Passing Data',    home: TodosScreen(              // generate list      tasks: List.generate(        10,            (i) => Task(          'Task $i',          'Task Description $i',        ),      ),    ),  ));}  // Home screenclass TodosScreen extends StatelessWidget {  final List<Task> tasks;    TodosScreen({Key key, @required this.tasks}) : super(key: key);    @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('GeeksForGeeks'),        backgroundColor: Colors.green,      ),      // List builder      body: ListView.builder(        itemCount: tasks.length,        itemBuilder: (context, index) {          return ListTile(            title: Text(tasks[index].task_name),            onTap: () {              Navigator.push(                context,                MaterialPageRoute(                  builder: (context) => DetailScreen(task: tasks[index]),                ),              );            },          );        },      ),    );  }}  // detail screenclass DetailScreen extends StatelessWidget {    final Task task;  DetailScreen({Key key, @required this.task}) : super(key: key);    @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(task.task_name),        backgroundColor: Colors.green,      ),      body: Padding(        padding: EdgeInsets.all(16.0),        child: Text(task.description),      ),    );  }}
Output:
surinderdawra388
android
Flutter
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.