7.2. Navegación y enrutamiento en Flutter: navegación entre pantallas

La navegación y las rutas son elementos cruciales en cualquier aplicación. En Flutter, desempeñan un papel vital a la hora de brindar una experiencia de usuario óptima. Este artículo analiza la navegación y el enrutamiento en Flutter, centrándose en la navegación entre pantallas. Comencemos con una comprensión básica.

En Flutter, todo es un widget. Entonces, cada 'pantalla' de tu aplicación es solo un widget. La navegación entre estos widgets (o pantallas) se logra mediante una pila, similar al patrón de pila en las estructuras de datos. Cada vez que se abre un nuevo widget, se coloca en esta pila. Y cuando el usuario termina de interactuar con un widget y regresa, el widget sale de la pila. Este es el concepto básico de navegación en Flutter.

Para navegar a una nueva pantalla, debe utilizar el método 'Navigator.push' proporcionado por Flutter. Este método toma dos argumentos: el contexto actual y la ruta a la nueva pantalla. La ruta generalmente se crea usando el método 'MaterialPageRoute', que toma un argumento del constructor: el widget que desea abrir.

Por ejemplo:

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

El código anterior abre un nuevo widget llamado 'SecondScreen'. El 'contexto' aquí es el contexto actual del widget. Se pasa a 'MaterialPageRoute' para que sepa dónde colocar el nuevo widget en el árbol de widgets.

Para volver a la pantalla anterior, puede utilizar el método 'Navigator.pop'. Este método elimina el widget actual de la pila y vuelve al widget anterior. Puede utilizar este método cuando el usuario haya terminado de interactuar con el widget actual. Por ejemplo, puedes llamar a 'Navigator.pop' cuando el usuario presiona un botón Atrás.

Además, Flutter también proporciona una forma de pasar datos entre widgets durante la navegación. Puedes pasar los datos como argumento al constructor del widget que estás abriendo. Por ejemplo:

Navegador.push(
    contexto,
    RutaPáginaMaterial(
        constructor: (contexto) => SecondScreen(datos: '¡Hola mundo!'),
    ),
);

El código anterior pasa una cadena '¡Hola, mundo!' a 'Segunda Pantalla'. En 'SecondScreen', puedes acceder a estos datos a través del argumento del constructor.

Además de la navegación básica, Flutter también admite enrutamiento con nombre. En el enrutamiento con nombre, usted define una tabla de rutas con nombres de rutas y sus respectivos widgets. Luego puede navegar a un widget usando su nombre de ruta. Esto es útil cuando tienes muchas pantallas en tu aplicación y la navegación se vuelve compleja.

Por ejemplo, puede definir una tabla de rutas como esta:

rutas finales = {
    '/': (contexto) => Pantalla de inicio(),
    '/segundo': (contexto) => SegundaPantalla(),
};

Luego puedes navegar a 'SecondScreen' usando su nombre de ruta:

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

En resumen, la navegación y el enrutamiento en Flutter son simples pero poderosos. Te permiten gestionar la navegación entre pantallas de forma eficiente y organizada. Además, ofrecen la flexibilidad de pasar datos entre pantallas y utilizar rutas con nombre para manejar la complejidad de la navegación.

Al crear aplicaciones con Flutter, es importante comprender la navegación y el enrutamiento para brindar una experiencia de usuario fluida e intuitiva. Así que asegúrese de tomarse el tiempo para aprender y experimentar con estos conceptos.

Siguiente página del libro electrónico gratuito:

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

3 minutos