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:
Dart
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:
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), ); }, );
Ahora cree una pantalla de inicio donde se pueda mostrar la lista usando un StatelessWidget de la siguiente manera:
Dart
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:
Dart
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:
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]), ), ); }, ); }, );
Código fuente completo:
Dart
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:
Publicación traducida automáticamente
Artículo escrito por ddeevviissaavviittaa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA