Flutter: envía datos a la pantalla usando RouteSettings

La interacción con la interfaz de usuario es una parte integral de cualquier aplicación. Pero la mayoría de las veces, la información debe enviarse de una pantalla a otra. Por ejemplo, supongamos que necesita pasar datos sobre un componente seleccionado o tocado de la interfaz de usuario a otra ruta (es decir, página). En este artículo, exploraremos en detalle el proceso de envío de datos a otra pantalla mediante la creación de una aplicación sencilla.

Para una mejor comprensión, crearemos una aplicación de notas de tareas que enumere todas las tareas pendientes en la pantalla de inicio y, al hacer clic en cualquiera de las tareas, se mostrará una descripción detallada respectiva de la tarea en otra página. Aquí pasaremos los datos de la pantalla de inicio (la tarea en la que se toca) a una pantalla de descripción.

Para crear la aplicación de notas de tareas, siga los pasos a continuación:

• Crear una clase de tarea
• Enumerar las tareas en la pantalla de inicio
• Diseñe una pantalla que muestre la descripción de la tarea extrayendo el argumento
• Pasar datos a la tarea seleccionada a la pantalla de descripción

Veamos la tarea en detalle.

Crear una clase de tarea:

A continuación se muestra una forma sencilla de definir la clase de tarea:

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

Listado de tareas:

Use ListView para generar la lista de tareas. En aras de la simplicidad, crearemos una lista de 10 tareas de la siguiente manera:

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

Ahora cree una pantalla de inicio donde se pueda mostrar la lista usando un StatelessWidget de la siguiente manera:

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

Diseño de la pantalla Descripción extrayendo argumentos:

Cree una página que extraiga el nombre de la tarea (nombre de la tarea) y la descripción de la tarea de la pantalla de inicio como un argumento usando el   método ModelRoute.of() como se muestra a continuación:

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

Pasar datos a la página de descripción:

Ahora pase la descripción y el nombre de la tarea como un argumento de RouteSettings asignando una función de devolución de llamada a la función onTap() que usa el método Navigator.push() de la clase Navigator como se muestra a continuación:

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

Código fuente completo:

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

Producción: