En todas las aplicaciones necesitamos navegar de una pantalla a otra para poder acceder a sus contenidos. Esto se puede hacer de dos maneras diferentes en Flutter: creando una instancia del widget PageRoute y pasándosela después al widget Navigator, o utilizando la opción de las rutas con nombre (Named Routes). En este artículo vamos a ver cómo establecer la navegación en Flutter con Routes.

Uso de PageRoute para navegar entre páginas

Tanto el paquete Cupertino (diseño iOS) como el Material Design (diseño Android), presentar un enrutador de pantallas: CupertinoPageRoute y MaterialPageRoute.

Por ejemplo, supongamos que tenemos una aplicación con una pantalla denominada Home, y queremos navegar a otra pantalla denominada Settings. Para hacerlo, por ejemplo con MaterialPageRoute, el código a usar seria el siguiente:

Lo que estamos haciendo es utilizar el widget Navigator de Flutter al cual le pasamos el actual context (BuildContext), junto con la indicación de hacia dónde queremos navegar.

El Navigator de Flutter tiene como función gestionar una serie de widgtets secundarios según una estructura de pilas o stack, de la misma forma que lo hacen otro tipo de plataformas.

En este caso que acabamos de ver, el movimiento entre las diferentes páginas lo realiza el Navigator según una lógica de push (Navigator.push) y de pop (Navigator.pop), siendo este último el que nos permitiría volver a una página:

Uso de rutas con nombre

El sistema de navegación está bien si tenemos una aplicación sencilla. Sin embargo, en aplicaciones más complejas donde sea necesario navegar a una página desde diferentes puntos, podemos encontrarnos con código duplicado.

Para evitar esto podemos usar las rutas con nombre. Para ello supongamos el caso en el que tenemos una aplicación con cuatro pantallas diferentes y sus correspondientes ficheros:

  • Welcome: welcome_screen.dart
  • Settings: settings_screen.dart
  • Dashboard: dashboard_screen.dart
  • Library: library_screen.dart

Esta información la podemos introducir en el parámetro routes de la clase MaterialApp:

Con la adición de estas rutas podemos navegar de una página a otra mediante el siguiente código:

Para evitar el uso de cadenas de texto cada vez que tenemos que hacer la llamada (reduciendo de esta manera posibles errores tipográficos), podemos añadir el nombre de cada ruta dentro de cada una de las pantallas:

De esta forma podemos cambiar el código en la clase _AccessPageState:

Y realizar la llamada mediante:

Orden de búsqueda de las rutas

En el momento de buscar las rutas, el componente Navigator sigue el siguiente orden:

  1. La ruta por defecto es la que se indica en el parámetro home (en nuestro caso hemos indicado WelcomeScreen).
  2. En caso contrario se utiliza la tabla de rutas indicada en el parámetro routes (en el que hemos indicado cuatro rutas).
  3. Luego se llamaría al parámetro onGenerateRoute (debe devolver un valor no nulo para cualquier ruta no contemplada en home o en routes).
  4. Si todo lo anterior falla, se llama a onUnknownRoute.

Uso de onGenerateRoute para la navegación

También podemos plantear la navegación de nuestra aplicación configurando el parámetro onGenerateRoute. A este parámetro se le ha de pasar una función que toma un parámetro del tipo RouteSettings y devuelve uno de tipo Route<dynamic>.

Para hacer esto creamos la clase MyRoutes, que nos ayudará en este propósito:

Si usamos onGenerateRoute, la clase NavDemoApp se muestra de la siguiente manera:

Y la navegación se hace de la siguiente manera:

Conclusiones

Hemos visto como podemos implementar la navegación entre pantallas en un proyecto Flutter de forma directa (creando una instancia de PageRoute) o mediante el uso de rutas (tanto en el parámetro routes como en el parámetro onGenerateRoute):


0 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Sígueme en Feedly