6.5. Widgets en Flutter: navegar entre pantallas

Los widgets son componentes clave al crear aplicaciones en Flutter. Son los componentes básicos de la interfaz de usuario en Flutter y cada widget es una parte inmutable de la interfaz de usuario. En este contexto, un aspecto importante de los widgets en Flutter es la navegación entre pantallas. Navegar entre pantallas es un aspecto crucial en la creación de aplicaciones móviles. En Flutter, la navegación entre pantallas se maneja mediante algo llamado Navegador, que es un widget que administra una pila de objetos Ruta.

El Navegador funciona de manera similar a cómo funciona la navegación en un sitio web. Cuando un usuario abre una aplicación, comienza en la "página de inicio" y desde allí puede navegar a otras "páginas" o pantallas. Cada vez que se abre una nueva pantalla, se apila encima de la pila. Cuando el usuario termina de interactuar con una pantalla y la cierra, esa pantalla sale de la pila y la pantalla anterior vuelve a ser la activa.

Para navegar entre pantallas en Flutter, necesitas usar el método 'Navigator.push' para abrir una nueva pantalla y 'Navigator.pop' para cerrar la pantalla actual y volver a la anterior. Aquí tienes un ejemplo de cómo puedes hacer esto:

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

Y así es como cerrarías la pantalla actual y volverías a la anterior:

Navegador.pop(contexto);

Además, puede pasar argumentos entre pantallas durante la navegación. Por ejemplo, si quieres pasar un valor de una pantalla a otra, puedes hacerlo así:

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

Y en SecondScreen, puedes acceder al valor pasado de esta manera:

clase SecondScreen extiende StatelessWidget {
  valor de cadena final;

  SecondScreen({Clave clave, @required this.value}): super(clave: clave);

  @anular
  Construcción de widgets (contexto BuildContext) {
    volver andamio (
      barra de aplicaciones: barra de aplicaciones(
        título: Texto('Segunda pantalla'),
      ),
      cuerpo: Centro(
        niño: Texto('Valor pasado: $valor'),
      ),
    );
  }
}

Estos son solo los conceptos básicos para navegar entre pantallas en Flutter. Hay muchas otras funciones avanzadas que puede utilizar, como navegación con nombre, envío de datos a la pantalla anterior, navegación con animaciones personalizadas y mucho más. Pero, para empezar, comprender cómo utilizar Navigator para impulsar y deshacer rutas es un primer paso crucial.

En resumen, los widgets en Flutter son la base para crear la interfaz de usuario. Son inmutables y cada vez que quieras cambiar la apariencia de un widget necesitas crear uno nuevo. La navegación entre pantallas se maneja mediante un widget llamado Navigator, que apila las pantallas a medida que se abren y las elimina de la pila cuando se cierran. Puede utilizar el método "empujar" para abrir una nueva pantalla y "hacer aparecer" para cerrar la actual. Además, puede pasar argumentos entre pantallas durante la navegación, lo que puede resultar útil para pasar datos de una pantalla a otra.

Espero que este texto te haya ayudado a comprender mejor los widgets en Flutter y cómo navegar entre pantallas. Recuerda, la práctica hace la perfección, así que sigue practicando y experimentando con diferentes widgets y métodos de navegación para sentirte más cómodo con Flutter.

Siguiente página del libro electrónico gratuito:

78Widgets en Flutter: Gestión de estados

4 minutos