7.11. Navegación y enrutamiento en Flutter: Navegación con Stack

7.11. Navegación y enrutamiento en Flutter: navegación por pila

La navegación y las rutas son una parte integral de cualquier aplicación moderna, y Flutter no es una excepción. Flutter facilita la creación de hermosas interfaces de usuario con un amplio conjunto de widgets prediseñados, pero también ofrece un potente sistema de navegación y enrutamiento para administrar cómo los usuarios se mueven por su aplicación. En este artículo, exploraremos el concepto de "Navegación por pila" en Flutter.

Comprensión de la navegación por la pila

En Flutter, la navegación entre diferentes pantallas o páginas de la aplicación se maneja mediante algo llamado "Navegador", que funciona de manera muy similar a una pila en informática. Cada vez que se abre un nuevo script (o página), se "empuja" a la parte superior de la pila. Cuando se cierra un script, se "desapila" y se elimina de la pila. Esto se llama "Navegación por pila".

La ventaja de este sistema es que permite un flujo de navegación intuitivo y fácil de gestionar. Puede volver fácilmente a la página anterior simplemente abriendo el script actual y siempre tendrá una referencia clara a la "página anterior" en forma de script en la parte superior de la pila.

Cómo implementar la navegación por pila

Para comenzar a usar la navegación de pila en Flutter, necesitarás usar la clase 'Navigator'. La clase 'Navigator' tiene dos métodos principales que usarás para administrar tu navegación: 'push' y 'pop'.

El método 'push' se utiliza para abrir un nuevo script. Recibe un objeto 'Ruta' que describe la página que desea abrir. Hay varias formas de crear un objeto 'Ruta', pero la más común es usar la clase 'MaterialPageRoute', que crea una ruta que pasa a la nueva página usando una animación de transición de Material Design.

El método 'pop', por otro lado, se utiliza para cerrar el script actual y volver al anterior en la pila. No requiere ningún argumento ya que simplemente elimina el script en la parte superior de la pila.

Ejemplo de navegación de pila

Echemos un vistazo a un ejemplo de cómo puedes usar la navegación por pila en Flutter. Supongamos que tiene dos páginas en su aplicación, 'Página de inicio' y 'Página de detalles', y desea permitir que el usuario navegue entre ellas.

Primero, necesitarás definir tus rutas. Esto se hace en el objeto 'MaterialApp' de su aplicación, que tiene una propiedad 'rutas' que toma un mapa de nombres de rutas para las funciones del generador de rutas. Así es como puedes definir tus rutas:

Aplicación de material(
  rutas: {
    '/': (contexto) => Página de inicio(),
    '/detalle': (contexto) => PáginaDetalle(),
  },
);

Luego puede utilizar el método 'Navigator.pushNamed' para navegar a la 'Página de detalles' desde la 'Página de inicio'. Así es como puedes hacerlo:

Navigator.pushNamed(contexto, '/detalle');

Finalmente, para volver a la 'Página de inicio' desde la 'Página de detalles', puede utilizar el método 'Navigator.pop'. He aquí cómo:

Navegador.pop(contexto);

Así es como puedes implementar la navegación por pila en Flutter. Es un sistema potente y flexible que puede manejar prácticamente cualquier flujo de navegación que puedas imaginar.

Conclusión

En resumen, la navegación apilada en Flutter es una forma efectiva de administrar el flujo de navegación en su aplicación. Con la clase 'Navigator' y sus métodos 'push' y 'pop', puedes abrir fácilmente páginas nuevas y volver a páginas anteriores. Si bien puede llevar algún tiempo acostumbrarse a la idea de la navegación apilada, una vez que la domine, descubrirá que ofrece una gran flexibilidad para crear experiencias de usuario intuitivas y agradables.

Siguiente página del libro electrónico gratuito:

97Navegación y enrutamiento en Flutter: Navegación con push/pop

3 minutos