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

Capítulo 89

Tiempo estimado de lectura: 3 minutos

+ Ejercicio
Audio Icon

Escuchar en audio

0:00 / 0:00

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.

Continúa en nuestra aplicación.
  • Escuche el audio con la pantalla apagada.
  • Obtenga un certificado al finalizar.
  • ¡Más de 5000 cursos para que explores!
O continúa leyendo más abajo...
Download App

Descargar la aplicación

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.

Ahora responde el ejercicio sobre el contenido:

_¿Cuál es el papel de las rutas con nombre en el desarrollo de aplicaciones Flutter?

¡Tienes razón! Felicitaciones, ahora pasa a la página siguiente.

¡Tú error! Inténtalo de nuevo.

Siguiente capítulo

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

Arrow Right Icon
Portada de libro electrónico gratuitaCómo crear apps desde cero hasta avanzadas usando Flutter y Dart curso completo
33%

Cómo crear apps desde cero hasta avanzadas usando Flutter y Dart curso completo

5

(3)

267 páginas

Descarga la aplicación para obtener una certificación gratuita y escuchar cursos en segundo plano, incluso con la pantalla apagada.