7.3. Navegación y enrutamiento en Flutter: pasar parámetros entre pantallas

La navegación y el enrutamiento son componentes esenciales para crear aplicaciones multipantalla. Flutter, con su lenguaje Dart, proporciona una forma eficiente y eficaz de gestionar la navegación y las rutas en tus aplicaciones. Profundicemos en el tema y comprendamos cómo se puede pasar parámetros entre pantallas en Flutter.

En Flutter, la navegación y el enrutamiento son manejados por una clase llamada Navigator. El Navegador funciona como una pila, donde cada ruta (o pantalla) se apila una encima de la otra. Cuando un usuario abre una aplicación, la primera pantalla que ve se llama ruta de inicio o "casa". A partir de ahí, cada nueva pantalla a la que navega el usuario se apila encima de la ruta inicial.

Pasar parámetros entre pantallas en Flutter es un proceso simple y directo. Los parámetros se pasan como argumentos a la función Navigator.push(). La función push() acepta dos parámetros: el contexto actual y la nueva ruta. La nueva ruta es una instancia de MaterialPageRoute, que a su vez toma un parámetro de construcción. El parámetro del constructor es una función que devuelve un nuevo widget, que es la nueva pantalla a la que se dirigirá al usuario.

Por ejemplo, si queremos pasar un parámetro "nombre de usuario" a una nueva pantalla, podemos hacerlo de la siguiente manera:

Navegador.push(
  contexto,
  RutaPáginaMaterial(
    constructor: (contexto) => NuevaPantalla(nombre de usuario: 'John Doe'),
  ),
);

En el ejemplo anterior, pasamos el parámetro "nombre de usuario" a la nueva pantalla "NuevaPantalla". Luego se accede al parámetro en la nueva pantalla usando la sintaxis widget.username.

Además de pasar parámetros a nuevas pantallas, Flutter también permite pasar datos de la nueva pantalla a la pantalla anterior. Esto se hace usando la función Navigator.pop(). La función pop() acepta dos parámetros: el contexto actual y los datos a devolver.

Por ejemplo, si queremos devolver un valor de "éxito" de la nueva pantalla a la pantalla anterior, podemos hacerlo así:

Navigator.pop(contexto, 'éxito');

En el ejemplo anterior, devolvemos el valor "éxito" de la pantalla anterior. Luego se puede acceder al valor devuelto en la pantalla anterior utilizando la función Navigator.push().

Por ejemplo, podemos hacer algo como:

resultado final = esperar Navigator.push(
  contexto,
  RutaPáginaMaterial(
    constructor: (contexto) => NuevaPantalla(nombre de usuario: 'John Doe'),
  ),
);

si (resultado == 'éxito') {
  // Hacer algo
}

En el ejemplo anterior, esperamos un valor de retorno de la nueva pantalla. Si el valor devuelto es "éxito", entonces hacemos algo.

En resumen, la navegación y el enrutamiento en Flutter son manejados por la clase Navigator, que funciona como una pila. El paso de parámetros entre pantallas se realiza mediante las funciones Navigator.push() y MaterialPageRoute(), mientras que el paso de datos a la pantalla anterior se realiza mediante la función Navigator.pop().

Con estas herramientas a mano, puedes crear aplicaciones Flutter complejas y avanzadas con múltiples pantallas y pasar parámetros entre ellas. La navegación y el enrutamiento son fundamentales para crear aplicaciones de Flutter, y comprender cómo funcionan es esencial para convertirse en un desarrollador de Flutter eficaz.

Siguiente página del libro electrónico gratuito:

89Navegación y enrutamiento en Flutter: Navegación con rutas con nombre

3 minutos