7.1. Navegación y enrutamiento en Flutter: Introducción al enrutamiento en Flutter

Para desarrollar aplicaciones complejas y dinámicas en Flutter, es esencial comprender el concepto de navegación y enrutamiento. En este contexto, el enrutamiento se refiere a la transición entre diferentes páginas, o "rutas", dentro de una aplicación. Flutter ofrece un enfoque flexible e intuitivo para gestionar estas transiciones, lo que permite a los desarrolladores crear experiencias de usuario ricas y atractivas.

La navegación en Flutter se basa en la idea de la pila de rutas. Cada ruta es una pantalla independiente. Cuando se navega por una nueva ruta, se apila encima de la pila. Cuando el usuario regresa, se elimina la ruta en la parte superior de la pila. Este es un enfoque común de navegación que se puede encontrar en muchos sistemas operativos, desde sistemas de escritorio hasta sistemas móviles.

Para comenzar a usar la navegación y el enrutamiento en Flutter, debes comprender el concepto de 'MaterialApp Widget'. Este es un widget conveniente que incluye varios widgets que las aplicaciones comúnmente necesitan. Se basa en un widget de WidgetsApp que agrega funcionalidades específicas de diseño de materiales. Este widget es donde defines tus rutas y proporcionas contexto para el resto de tu aplicación.

Las rutas en Flutter se definen utilizando un mapa de Dart. La clave es una cadena que identifica la ruta y el valor es una función que devuelve un widget que se mostrará cuando se navegue por esa ruta. Por ejemplo:

<código>
Aplicación de material(
  rutas: {
    '/': (contexto) => Pantalla de inicio(),
    '/detalle': (contexto) => Pantalla detallada(),
  },
);
</código>

Con este código, cuando se inicia la aplicación, se carga la ruta '/' mostrando la pantalla de inicio. Si el usuario navega a '/detail', se mostrará la pantalla detallada.

Para navegar a una nueva ruta, puede utilizar el método Navigator.push(). Este método apila una nueva ruta encima de la pila de rutas. Se necesitan dos argumentos: un contexto y un objeto Ruta. El objeto Ruta define la ruta que se apilará. A continuación se muestra un ejemplo de cómo puede navegar hasta la ruta '/detail':

<código>
Navigator.push(contexto, MaterialPageRoute(constructor: (contexto) => DetailScreen()));
</código>

Para volver a la ruta anterior, puede utilizar el método Navigator.pop(). Este método elimina la ruta superior de la pila, revelando la ruta debajo de ella. Aquí tienes un ejemplo de cómo puedes volver a la ruta anterior:

<código>
Navegador.pop(contexto);
</código>

Además, Flutter ofrece la posibilidad de pasar argumentos a las rutas. Esto resulta útil cuando necesita pasar datos de una pantalla a otra. Para hacer esto, puede pasar argumentos como parte del objeto Ruta. A continuación se muestra un ejemplo de cómo puede pasar argumentos a la ruta '/detail':

<código>
Navigator.push(contexto, MaterialPageRoute(
  constructor: (contexto) => Pantalla detallada(),
  configuración: Configuración de ruta (
    argumentos: '¡Hola, DetailScreen!',
  ),
));
</código>

Luego, en DetailScreen, puede acceder a los argumentos utilizando el método ModalRoute.of(). Aquí tienes un ejemplo de cómo puedes hacer esto:

<código>
argumentos finales = ModalRoute.of(context).settings.arguments;
</código>

En resumen, la navegación y el enrutamiento en Flutter son una parte esencial del desarrollo de aplicaciones. Te permiten gestionar la transición entre diferentes pantallas de tu aplicación de forma eficiente e intuitiva. Con una comprensión adecuada de estos conceptos, puede crear aplicaciones más complejas y dinámicas que brinden una experiencia de usuario rica y atractiva.

Siguiente página del libro electrónico gratuito:

87Navegación y enrutamiento en Flutter: navegación entre pantallas

3 minutos