Navegar a una nueva pantalla y volver

La mayoría de las aplicaciones contienen varias pantallas para mostrar diferentes tipos de información. Por ejemplo, una aplicación puede tener una pantalla que muestre productos. Cuando el usuario toca la imagen de un producto, una nueva pantalla muestra los detalles del producto.

En Android, una ruta es equivalente a una Activity. En iOS, una ruta es equivalente a un ViewController. En Flutter, una ruta es simplemente un Widget.

Esta receta utiliza el Navigator para navegar a una nueva ruta.

Las siguientes secciones muestran cómo navegar entre dos rutas, utilizando estos pasos:

1. Crear dos rutas.
2. Navegar a la segunda ruta usando Navigator.push().
3. Regresar a la primera ruta usando Navigator.pop().

Primero, crea dos rutas con las que trabajar. Dado que este es un ejemplo básico, cada ruta contiene solo un botón. Al tocar el botón en la primera ruta se navega a la segunda. Al tocar el botón en la segunda ruta se regresa a la primera.

Primero, configura la estructura visual:

class FirstRoute extends StatelessWidget {
  const FirstRoute({super.key});
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Route')),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            // Navigate to second route when tapped.
          },
        ),
      ),
    );
  }
}
​
class SecondRoute extends StatelessWidget {
  const SecondRoute({super.key});
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Route')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate back to first route when tapped.
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

class FirstRoute extends StatelessWidget {
  const FirstRoute({super.key});
​
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text('First Route')),
      child: Center(
        child: CupertinoButton(
          child: const Text('Open route'),
          onPressed: () {
            // Navigate to second route when tapped.
          },
        ),
      ),
    );
  }
}
​
class SecondRoute extends StatelessWidget {
  const SecondRoute({super.key});
​
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text('Second Route')),
      child: Center(
        child: CupertinoButton(
          onPressed: () {
            // Navigate back to first route when tapped.
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

Para cambiar a una nueva ruta, usa el método Navigator.push(). El método push() agrega una Route a la pila de rutas administradas por el Navigator. ¿De dónde proviene la Route? Puedes crear la tuya propia o usar una ruta específica de la plataforma, como MaterialPageRoute o CupertinoPageRoute. Una ruta específica de la plataforma es útil porque realiza la transición a la nueva ruta mediante una animación específica de la plataforma.

En el método build() del Widget FirstRoute, actualiza el callback onPressed():

// Within the `FirstRoute` widget:
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute<void>(
      builder: (context) => const SecondRoute(),
    ),
  );
}

// Within the `FirstRoute` widget:
onPressed: () {
  Navigator.push(
    context,
    CupertinoPageRoute<void>(
      builder: (context) => const SecondRoute(),
    ),
  );
}

¿Cómo cierras la segunda ruta y regresas a la primera? Utilizando el método Navigator.pop(). El método pop() elimina la Route actual de la pila de rutas administradas por el Navigator.

To implement a return to the original route, update the onPressed() callback in the SecondRoute Widget:

// Within the SecondRoute widget
onPressed: () {
  Navigator.pop(context);
}

La receta de este tema te muestra una forma de navegar a una nueva pantalla y regresar a la escena anterior, utilizando los métodos push y pop de la clase Navigator, pero hay varios otros métodos estáticos de Navigator que puedes utilizar. Aquí tienes algunos de ellos:

• pushAndRemoveUntil: Agrega una ruta de navegación a la pila y luego elimina las rutas más recientes de la pila hasta que se cumpla una condición.
• pushReplacement: Reemplaza la ruta actual en la parte superior de la pila por una nueva.
• replace: Reemplaza una ruta de la pila por otra ruta.
• replaceRouteBelow: Reemplaza la ruta que está debajo de una ruta específica en la pila.
• popUntil: Elimina las rutas más recientes que se agregaron a la pila de rutas de navegación hasta que se cumpla una condición.
• removeRoute: Elimina una ruta específica de la pila.
• removeRouteBelow: Elimina la ruta que está debajo de una ruta específica en la pila.
• restorablePush: Restaura una ruta que fue eliminada de la pila.