7.4. Navegación y enrutamiento en Flutter: Navegación con rutas con nombre

La navegación y el enrutamiento son aspectos fundamentales del desarrollo de aplicaciones. En Flutter, la navegación y el enrutamiento se manejan mediante un objeto de navegación que tiene una pila de widgets que se pueden manipular para navegar entre páginas. Una de las formas más eficientes de manejar la navegación en Flutter es mediante el uso de rutas con nombre.

Las rutas con nombre son esencialmente cadenas que se utilizan para identificar una página o pantalla en una aplicación Flutter. Son útiles porque te permiten navegar a una página sin necesidad de tener una referencia directa a ella. Esto hace que el código sea más fácil de mantener y más flexible, ya que puedes cambiar la implementación de una página sin tener que cambiar todos los lugares a los que se hace referencia.

Para comenzar a usar rutas con nombre en Flutter, debes definir un mapa de ruta en el objeto MaterialApp o WidgetsApp. Este mapa de ruta es un diccionario donde las claves son cadenas que representan los nombres de las rutas y los valores son funciones que devuelven el widget que debe mostrarse cuando se navega por la ruta.

Por ejemplo, es posible que tengas un mapa de ruta similar a este:

{
  '/': (contexto) => Página de inicio(),
  '/detalle': (contexto) => PáginaDetalle(),
}

Aquí, la ruta '/' corresponde a la página de inicio y la ruta '/detail' corresponde a la página de detalles. Puede navegar a estas páginas utilizando el método Navigator.pushNamed, pasando el contexto y el nombre de la ruta como argumentos.

Por ejemplo, para navegar a la página de detalles, haría lo siguiente:

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

Esto empujará la página de detalles a la parte superior de la pila de navegación y la mostrará. Si desea pasar argumentos a la página, puede pasarlos como tercer argumento al método pushNamed. Por ejemplo, si quisieras pasar un objeto Elemento a la Página de detalles, harías esto:

Navigator.pushNamed(contexto, '/detalle', argumentos: elemento);

En la página de detalles, puede acceder a los argumentos utilizando el método ModalRoute.of para obtener la ruta actual y luego acceder a la propiedad de los argumentos. Por ejemplo:

elemento final = ModalRoute.of(context).settings.arguments as Item;

Esto recuperará el objeto Item que pasaste como argumento cuando navegaste a la página.

Las rutas con nombre hacen que la navegación en Flutter sea mucho más manejable y flexible. Le permiten definir todas sus rutas en un solo lugar, haciéndolas más fáciles de mantener y cambiar. Además, dado que las rutas son solo cadenas, puedes pasar fácilmente los nombres de las rutas como argumentos, almacenarlos en variables o incluso generarlos dinámicamente.

En resumen, la navegación y el enrutamiento son una parte esencial del desarrollo de la aplicación Flutter, y el uso de rutas con nombre puede simplificar enormemente este proceso. Si comprende cómo utilizar rutas con nombre, podrá hacer que su código sea más fácil de mantener, más flexible y más fácil de navegar.

Siguiente página del libro electrónico gratuito:

90Navegación y enrutamiento en Flutter: Navegación con rutas dinámicas

3 minutos