Flutter — Navegación y rutas

Cuando hablamos de navegación y rutas nos referimos a la forma en que podemos movernos entre pantallas, es todo un sistema que podemos gestionar para que la navegabilidad de la aplicación sea más estructurada.

Flutter proporciona un sistema completo de navegación entre pantallas y gestionar los Deep Links (hacen posible que por medio de un link podamos ingresar a una pantalla determinada de la aplicación). Para ésto Flutter nos brinda el widget Navigator y también la clase Router para mantener una gestión correcta de las rutas y deep links.

Usando Navigator

El widget Navigator muestra las pantallas como una pila utilizando las animaciones de transición. Esta pila son objetos de tipo Route y podemos tener allí un historial de navegación. La navegación se realiza utilizando varios métodos que tenemos a disposición como push() o pop() y todo va a través del BuildContext. Por lo general se suele utilizar MaterialPageRoute que es subclase de Route, por ejemplo dentro del método push().

métodos más usados

of()

Recibe como parámetro el contexto (BuildContext) de la instancia en la que estemos actualmente.

Navigator.of(context)
  ..pop()
  ..pop()
  ..pushNamed('/settings');

push()

El push lo que hace es empujar la ruta dada por medio de la clase MaterialPageRoute, en esta clase se envía el contexto y el widget de la nueva pantalla que va a mostrar.

Navigator.of(context).push(
    MaterialPageRoute(
        builder: (context) => const ListScreen(),
    ),
);

pop()

Pop lo que hace es si ya hay un historial de navegación en Navigator, nos devuelve a la Route o pantalla anterior. Se usa mucho en modales para cerrarlos y permanecer en la pantalla de fondo.

Navigator.pop(context);

pushReplacement()

Lo que hace es reemplazar la ruta actual del Navigator por una ruta nueva (widget) enviada para posteriormente eliminar la ruta anterior.

Navigator.pushReplacement(
    context,
    MaterialPageRoute<void>(
        builder: (BuildContext context) => const HomeScreen(),
    ),
);

Usando rutas con nombre

Es otro tipo que nos brinda Navigator también para la navegación tal vez más sencilla por medio de los nombres de unas rutas que son configuradas en MaterialApp.

// main.dart
Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Widgets',
      // definimos la ruta inicial de la aplicación
      initialRoute: '/home',
      // configuramos todas las rutas que vamos a tener en la aplicación
      // llevan un nombre el contexto y el widget de cada vista.
      routes: <String, WidgetBuilder>{
        '/home': (BuildContext context) => const HomeScreen(),
        '/settings': (BuildContext context) => const SettingScreen(),
      },
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)),
      home: const HomeScreen(),
    );
  }

pushNamed()

Este método funciona muy similar al push solo que no lo hace recibiendo el widget directamente sino que lo hace por medio del nombre de una ruta configurada. Estas rutas debe estar en la propiedad routes de MaterialApp.

Navigator.popAndPushNamed(context, '/home');

popAndPushNamed()

Este método recibe el contexto actual y una ruta. Lo que hace es eliminar la ruta actual del historial [pop()], y el nombre de la nueva ruta lo agrega al Navigator.

Navigator.popAndPushNamed(context, '/settings');

popUntil()

Lo que hace es llamar a [pop()] varias veces hasta conseguir que el predicado devuelva verdadero. Un uso común es en los cierres de sesión.

void _logout() {
  Navigator.popUntil(context, ModalRoute.withName('/login'));
}

pushReplacementNamed()

Realiza la misma función que el método anterior, con la única diferencia de que la nueva ruta se acceder por medio del nombre y no enviando el objeto o widget completo.

Navigator.pushReplacementNamed(context, '/home');

Demostración

Código fuente

GitHub – jaimetellezb/widget-catalog at feature/navigation

Conclusión

En conclusión, vimos como Flutter nos brinda un sistema muy completo para manejar nuestra navegación entre pantallas de una forma estructurada. Pero existen algunos paquetes que hacen el manejo de rutas aún más sencillo como por ejemplo: go_router. Luego haremos un artículo dedicado a este tema.

Siguiente artículo

Veremos sobre el uso de go_router y algunas de sus funciones.

¡¡¡Gracias por leer este artículo!!!

Referencias

• https://github.com/jaimetellezb/widget-catalog/tree/feature/navigation
• https://docs.flutter.dev/ui/navigation