7.6. Navegación y enrutamiento en Flutter: gestión del historial de navegación

La navegación y el enrutamiento son aspectos fundamentales del desarrollo de aplicaciones. Permiten a los usuarios moverse entre diferentes pantallas y realizar diferentes acciones. En Flutter, la gestión del historial de navegación se realiza a través de una pila de rutas, donde cada ruta representa una nueva pantalla o página. Flutter usa el paquete Dart 'dart:ui' para administrar esta pila de rutas.

Para empezar, es importante comprender el concepto de rutas en Flutter. Una ruta es una abstracción de una "pantalla" o "página" de una aplicación. En Flutter, las rutas están representadas por widgets. Cada ruta por la que navega se apila en la parte superior de la pila de rutas. La ruta en la parte superior de la pila es la ruta actualmente activa.

Para navegar a una nueva ruta, puede utilizar el método Navigator.push. Este método agrega la ruta especificada a la parte superior de la pila de rutas. Flutter anima automáticamente la transición a la nueva ruta por ti. A continuación se muestra un ejemplo de cómo puede utilizar Navigator.push:

Navegador.push(
  contexto,
  MaterialPageRoute(constructor: (contexto) => SecondRoute()),
);

Esto hará que Flutter cree el widget SecondRoute y lo anime en la pantalla, superponiendo la ruta actual. Cuando quieras volver a la ruta anterior, puedes utilizar el método Navigator.pop. Este método elimina la ruta superior de la pila y vuelve a la ruta anterior. Aquí tienes un ejemplo de cómo puedes utilizar Navigator.pop:

Navegador.pop(contexto);

Esto hará que Flutter extraiga la ruta actual de la pila y regrese a la ruta anterior, animando la transición por usted.

En algunos casos, es posible que desees navegar hasta una ruta y eliminar todas las rutas anteriores de la pila. Para hacer esto, puede utilizar el método Navigator.pushAndRemoveUntil. Este método empuja la ruta especificada a la parte superior de la pila y elimina todas las demás rutas hasta que se cumpla la condición dada. A continuación se muestra un ejemplo de cómo puede utilizar Navigator.pushAndRemoveUntil:

Navigator.pushAndRemoveUntil(
  contexto,
  MaterialPageRoute(constructor: (contexto) => SecondRoute()),
  (Ruta ruta) => falso,
);

Esto hará que Flutter cree el widget SecondRoute, lo anime en la pantalla y elimine todas las demás rutas de la pila.

Además, Flutter también proporciona una forma de definir rutas con nombre. Las rutas con nombre son útiles cuando necesitas navegar a una ruta desde varios lugares de tu aplicación. Para definir una ruta con nombre, puede utilizar el parámetro onGenerateRoute del widget MaterialApp o CupertinoApp. Aquí tienes un ejemplo de cómo puedes definir rutas con nombre:

Aplicación de material(
  onGenerateRoute: (configuración) {
    if (configuración.nombre == '/segundo') {
      return MaterialPageRoute(constructor: (contexto) => SecondRoute());
    }
  },
);

Para navegar a una ruta con nombre, puede utilizar el método Navigator.pushNamed. Este método coloca la ruta con el nombre especificado en la parte superior de la pila. A continuación se muestra un ejemplo de cómo puede utilizar Navigator.pushNamed:

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

En resumen, la navegación y el enrutamiento en Flutter se administran a través de una pila de rutas. Cada ruta representa una "pantalla" o "página" de una aplicación. Puede navegar a una nueva ruta usando el método Navigator.push y volver a la ruta anterior usando el método Navigator.pop. Además, Flutter también proporciona una forma de definir rutas con nombre, que son útiles cuando necesitas navegar a una ruta desde varios lugares de tu aplicación.

Siguiente página del libro electrónico gratuito:

92Navegación y enrutamiento en Flutter: navegación con pestañas

3 minutos