Flutter – Send Data to Screen using RouteSettings

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 by extracting the argument
  • Pass data to the tapped task to the description screen

Let’s look into the task in detail.

Creating a Task class:

A simple way to define the task class is shown below:



Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

class Task {
  final String task_name;
  final String description;
  
  Task(this.task_name, this.description);
}

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Now create a home screen where the list can be displayed using a StatelessWidget as follow:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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 tyhe home screen as an argument using the  ModelRoute.of() method as shown below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Task task = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text(task.task_name),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(task.description),
      ),
    );
  }
}

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

ListView.builder(
  itemCount: tasks.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(tasks[index].task_name),
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailScreen(),
            settings: RouteSettings(
              arguments: tasks[index],
            ),
          ),
        );
      },
    );
  },
),

chevron_right


Complete Source Code:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
  
class Task {
  final String task_name;
  final String description;
  
  Todo(this.task_name, this.description);
}
  
void main() {
  runApp(MaterialApp(
    title: 'Passing Data',
    home: TodosScreen(
      tasks: List.generate(
        10,
        (i) => Todo(
          'Task $i',
          'Task Description $i',
        ),
      ),
    ),
  ));
}
  
class TodosScreen extends StatelessWidget {
  final List<Todo> tasks;
  
  TodosScreen({Key key, @required this.todos}) : super(key: key);
  
  @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].title),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailScreen(),
                  settings: RouteSettings(
                    arguments: tasks[index],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}
  
class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Task task = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text(task.task_name),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(task.description),
      ),
    );
  }
}

chevron_right


Output:




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.