Open In App

Flutter - Send Data to Screen

Last Updated : 07 Mar, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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 clicked on 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 Test 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 Task {
  final String task_name;
  final String description;

  Task(this.task_name, this.description);
}


Step 3: Listing the Tasks

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<Task> tasks;

  TodosScreen({super.key, required this.tasks});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Color.green,
      ),

      body: ListView.builder(
        itemCount: tasks.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(tasks[index].task_name)
          );
        },
      ),
    );
  }
}


Step 4: Designing the Description Screen

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({super.key, required this.task});

  @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),
      ),
    );
  }
}


Step 5: Passing Data to the Description Page

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

main.dart:

Dart 
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Passing Data',
    debugShowCheckedModeBanner: false,
    home: TodosScreen(
      // generate list
      tasks: List.generate(
        10,
        (i) => Task(
          'Task $i',
          'Task Description $i',
        ),
      ),
    ),
  ));
}

// Home screen
class TodosScreen extends StatelessWidget {
  final List<Task> tasks;

  TodosScreen({super.key, required this.tasks});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      // 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 screen
class DetailScreen extends StatelessWidget {
  final Task task;
  DetailScreen({super.key, required this.task});

  @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),
      ),
    );
  }
}

class Task {
  final String task_name;
  final String description;

  Task(this.task_name, this.description);
}


Output:



Next Article
Gallery Access and Camera in Flutter

D
ddeevviissaavviittaa
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox