Navegación y enrutamiento

Flutter proporciona un sistema completo para navegar entre pantallas y manejar enlaces profundos (deep links). Las aplicaciones pequeñas sin enlaces profundos complejos pueden usar Navigator, mientras que las aplicaciones con requisitos específicos de navegación y enlaces profundos también deberían usar el Router para manejar correctamente los enlaces profundos en Android e iOS, y mantenerse en sincronía con la barra de direcciones cuando la aplicación se ejecuta en la web.

Para configurar tu aplicación Android o iOS para manejar enlaces profundos, consulta Enlaces profundos.

El widget Navigator muestra las pantallas como una pila utilizando las animaciones de transición correctas para la plataforma de destino. Para navegar a una nueva pantalla, accede al Navigator a través del BuildContext de la ruta y llama a métodos imperativos como push() o pop():

child: const Text('Open second screen'),
onPressed: () {
  Navigator.of(context).push(
    MaterialPageRoute<void>(
      builder: (context) => const SecondScreen(),
    ),
  );
},

Debido a que Navigator mantiene una pila de objetos Route (que representan la pila del historial), el método push() también toma un objeto Route. El objeto MaterialPageRoute es una subclase de Route que especifica las animaciones de transición para Material Design. Para obtener más ejemplos sobre cómo usar el Navigator, sigue las recetas de navegación del Flutter Cookbook o visita la documentación de la API de Navigator.

Las aplicaciones con requisitos simples de navegación y enlaces profundos pueden usar el Navigator para la navegación y el parámetro MaterialApp.routes para enlaces profundos:

child: const Text('Open second screen'),
onPressed: () {
  Navigator.pushNamed(context, '/second');
},

/second representa una ruta nombrada que fue declarada en la lista MaterialApp.routes. Para obtener un ejemplo completo, sigue la receta Navegar con rutas nombradas del Flutter Cookbook.

Aunque las rutas nombradas pueden manejar enlaces profundos, el comportamiento es siempre el mismo y no se puede personalizar. Cuando la plataforma recibe un nuevo enlace profundo, Flutter hace push de una nueva Route en el Navigator independientemente de dónde se encuentre el usuario actualmente.

Flutter tampoco admite el botón de avance del navegador para aplicaciones que utilizan rutas nombradas. Por estas razones, no recomendamos usar rutas nombradas en la mayoría de las aplicaciones. En su lugar, usa un paquete de enrutamiento como go_router o usa Navigator con MaterialPageRoute.

Las aplicaciones Flutter con requisitos avanzados de navegación y enrutamiento (como una aplicación web que utiliza enlaces directos a cada pantalla, o una aplicación con múltiples widgets Navigator) deben usar un paquete de enrutamiento como go_router que pueda analizar la ruta del camino y configurar el Navigator cada vez que la aplicación reciba un nuevo enlace profundo.

Para usar el Router, cambia al constructor router en MaterialApp o CupertinoApp y proporciónale una configuración de Router. Los paquetes de enrutamiento, como go_router, típicamente proporcionan configuración de rutas y las rutas se pueden usar de la siguiente manera:

child: const Text('Open second screen'),
onPressed: () => context.go('/second'),

Debido a que paquetes como go_router son declarativos, siempre mostrarán las mismas pantallas cuando se reciba un enlace profundo.

El Router y el Navigator están diseñados para trabajar juntos. Puedes navegar usando la API del Router a través de un paquete de enrutamiento declarativo, como go_router, o llamando a métodos imperativos como push() y pop() en el Navigator.

Cuando navegas usando el Router o un paquete de enrutamiento declarativo, cada ruta en el Navigator está respaldada por una página (page-backed), lo que significa que fue creada a partir de una Page usando el argumento pages en el constructor del Navigator. Por el contrario, cualquier Route creada llamando a Navigator.push o showDialog agregará una ruta sin página (pageless) al Navigator. Si estás utilizando un paquete de enrutamiento, las rutas que están respaldadas por página siempre se pueden vincular mediante enlaces profundos, mientras que las rutas sin página no.

Cuando una Route respaldada por página se elimina del Navigator, todas las rutas sin página posteriores a ella también se eliminan. Por ejemplo, si un enlace profundo navega eliminando una ruta respaldada por página del Navigator, todas las rutas sin página posteriores (hasta la siguiente ruta respaldada por página) también se eliminan.

Las aplicaciones que usan la clase Router se integran con la API de historial del navegador (History API) para proporcionar una experiencia coherente al usar los botones atrás y adelante del navegador. Cada vez que navegas usando el Router, se agrega una entrada de la History API a la pila de historial del navegador. Al presionar el botón atrás se utiliza una navegación cronológica inversa, lo que significa que el usuario es llevado a la ubicación visitada anteriormente que se mostró utilizando el Router. Esto significa que si el usuario elimina (pop) una página del Navigator y luego presiona el botón atrás del navegador, la página anterior se vuelve a insertar (push) en la pila.

Para obtener más información sobre navegación y enrutamiento, consulta los siguientes recursos:

• El Flutter cookbook incluye múltiples recetas de navegación que muestran cómo usar el Navigator.
• La documentación de las API de Navigator y Router contiene detalles sobre cómo configurar la navegación declarativa sin un paquete de enrutamiento.
• Entendiendo la navegación, una página de la documentación de Material Design, resume los conceptos para diseñar la navegación en tu aplicación, incluyendo explicaciones para la navegación hacia adelante, hacia arriba y cronológica.
• Aprendiendo el nuevo sistema de navegación y enrutamiento de Flutter, un artículo en Medium, describe cómo usar el widget Router directamente, sin un paquete de enrutamiento.
• El documento de diseño del Router contiene la motivación y el diseño de la API de Router.