La navegación entre pantallas es lo que convierte una app simple en una aplicación real. Aquí aprenderás cómo crear una nueva pantalla en Flutter, redirigir al usuario hacia ella y enviar información entre vistas usando Navigator, MaterialPageRoute y GestureDetector. Ideal si ya construiste tu primera UI y quieres dar el siguiente paso.

¿Cómo se crea una nueva pantalla en Flutter?

Todo empieza con un archivo nuevo. En este caso, creamos recipe_detail.dart, que será la pantalla de detalle de una receta dentro de la app.

Dentro de ese archivo defines un stateless widget llamado RecipeDetail y, lo más importante, importas el paquete de Material App. Sin esa importación, nada del ecosistema visual de Flutter va a funcionar.

¿Qué estructura mínima debe tener la pantalla nueva?

Para que la pantalla tenga un punto de partida y un punto de retorno, necesitas un Scaffold, que funciona como una hoja en blanco lista para decorar. Sobre ese scaffold armas:

• Un AppBar con color de fondo, en este ejemplo naranja.
• Un leading que contiene el icono de regreso.
• El icono Icons.arrow_back en color blanco para que contraste con la barra.

¿Qué es un Scaffold en Flutter? Es el widget base que estructura una pantalla. Te da espacio para colocar AppBar, body, botones flotantes y más, sin tener que armar el layout desde cero.

¿Cómo regresar a la pantalla anterior con Navigator.pop?

El icono de la flecha no sirve de nada si no tiene una acción. Para que funcione, lo envuelves en una función que ejecute Navigator.pop(context).

Esa instrucción saca la pantalla actual de la pila de navegación y te devuelve a la anterior. Es exactamente lo mismo que hicimos antes al cerrar el formulario: una sola línea, pero hace todo el trabajo.

¿Cómo redirigir entre pantallas con GestureDetector y Navigator.push?

Ahora viene lo interesante: que al tocar una card en la página principal, te lleve al detalle de la receta. Para eso usamos dos piezas clave.

Primero, envuelves todo el Padding de la card en un widget GestureDetector. Este widget detecta gestos del usuario, y como estamos diseñando para móviles, usamos la propiedad onTap.

Dentro del onTap llamas a Navigator.push, que apila una nueva ruta sobre la actual. La ruta se construye con MaterialPageRoute, que recibe un builder con el contexto y devuelve la nueva pantalla, en este caso RecipeDetail().

dart GestureDetector( onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => RecipeDetail(recipeName: 'Lasaña'), ), ); }, child: Padding(...), )

No olvides importar el archivo recipe_detail.dart en tu home, o el editor te marcará error al intentar usar la clase.

¿Cuál es la diferencia entre push y pop en Flutter?

Son las dos caras de la misma moneda dentro del sistema de navegación basado en pila.

• Navigator.push: agrega una pantalla nueva encima de la actual.
• Navigator.pop: quita la pantalla actual y vuelve a la anterior.
• MaterialPageRoute: define cómo se construye y anima la transición entre ambas.

¿Para qué sirve GestureDetector? Es un widget invisible que detecta toques, deslizamientos y otros gestos sobre el widget que envuelve. Lo usas cuando un elemento que no es botón, como una card, necesita responder a interacciones.

¿Cómo pasar datos entre pantallas en Flutter?

Navegar está bien, pero una app real necesita que la pantalla destino sepa qué mostrar. La forma más directa es enviar la información a través del constructor del widget de destino.

En la home, al llamar a RecipeDetail, le pasas el dato como argumento, por ejemplo recipeName: 'Lasaña'. Ese valor viaja hasta la nueva pantalla.

¿Cómo se reciben los datos en el widget de destino?

Dentro de RecipeDetail declaras una variable final del tipo correcto, en este caso un String llamado recipeName. La marcas como final porque su valor no va a cambiar después de construir el widget.

Luego ajustas el constructor para que reciba ese parámetro como obligatorio, usando this.recipeName. El this deja claro que estás asignando el valor recibido a la variable que acabas de declarar arriba.

dart class RecipeDetail extends StatelessWidget { final String recipeName; const RecipeDetail({required this.recipeName}); }

Después puedes usar recipeName donde quieras dentro del widget. Por ejemplo, dentro del title del AppBar, envuelto en un Text(recipeName). Al guardar y tocar la card, verás el nombre de la receta viajando de una pantalla a otra. Y al pulsar la flecha, regresas a la ruta principal.

¿Por qué importa dominar la navegación en Flutter?

La navegación es el esqueleto de cualquier app con varias funcionalidades. Cuando entiendes cómo apilar rutas, cómo regresar y cómo pasar datos por el constructor, ya puedes construir flujos completos: listas que llevan a detalles, formularios que devuelven resultados, pantallas de configuración encadenadas.

El siguiente paso natural es la persistencia de datos, para que esa información que viaja entre pantallas también sobreviva al cerrar la app. ¿Qué pantalla te gustaría conectar primero en tu proyecto? Cuéntalo en los comentarios.