Navegación en Flutter
Introducción
Flutter es un framework de desarrollo de aplicaciones móviles que permite crear aplicaciones con una sola base de código para iOS y Android. Una de las características más importantes de Flutter es su sistema de navegación, que permite crear aplicaciones con varias pantallas de forma sencilla y eficaz.
El Navigator es el componente de Flutter que se encarga de la navegación entre las pantallas. Proporciona una serie de métodos que permiten añadir, eliminar y reemplazar pantallas en el stack de rutas.
Conceptos básicos
El stack de rutas es una pila que contiene todas las pantallas que están actualmente abiertas en la aplicación. El Navigator se encarga de gestionar este stack, permitiendo añadir, eliminar y reemplazar pantallas.
El BuildContext es un objeto que proporciona información sobre el contexto de la pantalla en la que se está ejecutando el código. El Navigator utiliza el BuildContext para identificar la pantalla actual y las pantallas anteriores.
El Route es un objeto que representa una pantalla. El Navigator utiliza los Route para añadir, eliminar y reemplazar pantallas.
El método Navigator.push()
El método Navigator.push() se utiliza para añadir una nueva pantalla al stack de rutas. Este método recibe un objeto Route que define la nueva pantalla que se va a mostrar.
Por ejemplo, el siguiente código abre la pantalla VistaSeleImage desde la pantalla actual:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const VistaSeleImage(),
),
);
El método Navigator.pop()
El método Navigator.pop() se utiliza para eliminar la pantalla actual del stack de rutas. Este método también puede devolver un valor opcional a la vista que lo llamó.
Por ejemplo, el siguiente código cierra la pantalla VistaSeleImage y devuelve una imagen seleccionada:
final imagen = await Navigator.pop(context);
Variaciones del método Navigator.push()
El método Navigator.push() tiene algunas variaciones que se pueden usar para diferentes casos de navegación.
- Usar una ruta con nombre: El método Navigator.pushNamed() se utiliza para añadir una nueva pantalla al stack de rutas usando un nombre. Este método recibe una cadena de texto que representa el nombre de la ruta.
Por ejemplo, el siguiente código abre la pantalla con el nombre /vista y pasa un dato:
Navigator.pushNamed(
context,
'/vista',
arguments: dato,
);
- Usar un tipo de ruta diferente: El método Navigator.pushReplacement() se utiliza para reemplazar la vista actual por otra y eliminar la vista actual del stack de rutas.
Por ejemplo, el siguiente código reemplaza la vista actual por la vista VistaFinal y no vuelve a la vista actual:
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => const VistaFinal(),
),
);
- Usar un argumento para pasar información: El método Navigator.pushReplacementNamed() se utiliza para reemplazar la vista actual por otra usando un nombre y un argumento opcional que se puede pasar a la nueva vista.
Por ejemplo, el siguiente código reemplaza la vista actual por la vista con el nombre /final y pasa un dato:
Navigator.pushReplacementNamed(
context,
'/final',
arguments: dato,
);
Otros métodos del Navigator
El Navigator tiene otros métodos que se pueden usar para diferentes casos de navegación.
-
Navigator.popUntil(): Este método se utiliza para eliminar varias vistas del stack de rutas hasta que se cumpla una condición.
-
Navigator.pushAndRemoveUntil(): Este método se utiliza para añadir una nueva vista al stack de rutas y eliminar todas las vistas anteriores hasta que se cumpla una condición.
Conclusión
El Navigator es un componente esencial de Flutter que permite crear aplicaciones con varias pantallas de forma sencilla y eficaz. En este artículo hemos visto los conceptos básicos del Navigator y algunos de los métodos más usados.
Para obtener más información sobre el Navigator, puedes consultar la documentación oficial de Flutter.
🛳️
Comentarios
Publicar un comentario