Construir aplicaciones con múltiples pantallas es fundamental en cualquier proyecto real con Flutter. Saber cómo crear una nueva vista, redirigir al usuario hacia ella y enviar información entre pantallas marca la diferencia entre una app básica y una experiencia fluida y profesional.
¿Cómo crear una nueva pantalla en Flutter?
El primer paso es generar un nuevo archivo Dart para la pantalla de destino. En este caso se crea un archivo llamado recipe_detail.dart que contiene un StatelessWidget con el nombre RecipeDetail [0:18]. La estructura es directa: se declara la clase, su constructor y se importa el paquete de Material para que todo funcione correctamente.
Una vez creada la clase, se le agrega un Scaffold como base visual. Dentro de este Scaffold se define un AppBar que actúa como barra superior de la pantalla [0:42]. Esta barra incluye:
- Un ícono de flecha hacia atrás con
Icons.arrow_back.
- Un color blanco para el ícono, contrastando con el fondo naranja del AppBar.
- La propiedad
backgroundColor configurada en Colors.orange.
El ícono de regreso ejecuta la función Navigator.pop(context) [0:56], que permite volver a la pantalla anterior eliminando la vista actual de la pila de navegación. Este patrón es el mismo que se utiliza, por ejemplo, al cerrar un formulario.
¿Cómo redirigir de una pantalla a otra con GestureDetector?
Para que el usuario pueda ir desde el home hacia el detalle de la receta, se envuelve el contenido del body dentro de un widget llamado GestureDetector [1:42]. Este widget detecta interacciones táctiles y expone eventos como onTap, ideal para dispositivos móviles.
Dentro del onTap se utiliza Navigator.push junto con MaterialPageRoute [1:58]. Esta combinación construye la ruta hacia la nueva pantalla:
dart
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RecipeDetail(),
),
);
},
child: // tu card aquí
)
Navigator.push agrega una nueva pantalla a la pila de navegación, mientras que MaterialPageRoute define la transición visual estándar de Material Design. Es necesario importar el archivo de la pantalla destino y pasar el context para que Flutter gestione correctamente el traspaso entre vistas [2:22].
¿Qué es la pila de navegación?
Flutter maneja las pantallas como una pila (stack). Cuando haces push, colocas una nueva pantalla encima. Cuando haces pop, la eliminas y regresas a la anterior. Este modelo permite controlar el flujo de la aplicación de forma predecible.
¿Cómo pasar datos entre pantallas en Flutter?
Una vez que la redirección funciona, el siguiente paso es enviar información de una pantalla a otra. En el ejemplo, se pasa el nombre de la receta como un string con valor "lasaña" [2:52].
Para recibir este dato en la pantalla destino, se declara una variable final String recipeName dentro de la clase RecipeDetail [3:04]. Luego se agrega al constructor con la palabra clave required:
dart
class RecipeDetail extends StatelessWidget {
final String recipeName;
const RecipeDetail({required this.recipeName});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(recipeName),
backgroundColor: Colors.orange,
),
);
}
}
Desde el home, la llamada se actualiza así:
dart
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RecipeDetail(recipeName: 'Lasaña'),
),
);
¿Cómo se muestra el dato recibido?
La variable recipeName se utiliza directamente dentro de un widget Text en el título del AppBar [3:30]. Al guardar y ejecutar, se puede observar cómo al tocar la card se abre la nueva pantalla mostrando el nombre "Lasaña" en la barra superior. Al presionar la flecha de regreso, la app vuelve a la ruta principal.
Este flujo completo demuestra tres habilidades esenciales: crear pantallas independientes, gestionar la navegación con Navigator y transferir datos entre vistas usando constructores. Dominar estos conceptos abre la puerta a funcionalidades más avanzadas como la persistencia de datos en la aplicación.
¿Has probado pasar objetos más complejos entre pantallas? Comparte tu experiencia en los comentarios.
