Flutter – Enviar datos a la pantalla

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 enumera todas las tareas pendientes en la pantalla de inicio y cuando se hace clic en cualquiera de las tareas, se muestra 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
• 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:

Utilice 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:

Nuevamente use StatelessWidget para crear una ruta para la página de descripción. La barra de título de la pantalla debe mostrar task_name (nombre de la tarea) y el cuerpo debe consistir en la descripción de la tarea como se muestra a continuación:

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

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

Aquí asignaremos una función de devolución de llamada a la función onTap() que usa el método Navigator.push() de la clase Navigator para pasar los datos a la pantalla de descripción como se muestra a continuación:

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

Código fuente completo:

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

Producción: