Flutter Send Data to Screen using RouteSettings (original) (raw)

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 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_nameas 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 todos;

TodosScreen({ Key? key, required this.todos, }) : super(key: key);

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: