7.13. Navegación y enrutamiento en Flutter: Navegación con parámetros opcionales

La navegación y el enrutamiento son partes esenciales del desarrollo de aplicaciones. En Flutter, la navegación y las rutas se administran con la ayuda del widget Navigator y las rutas. La navegación se refiere al proceso de moverse entre diferentes pantallas en una aplicación, mientras que el enrutamiento se refiere a asignar URL u otros identificadores a pantallas específicas. Este capítulo cubrirá la navegación con parámetros opcionales en Flutter.

Para empezar, es importante comprender qué son los parámetros opcionales. En Dart, los parámetros opcionales son argumentos que puedes pasar a una función, pero no son obligatorios. Esto es útil cuando tienes una función que puede aceptar múltiples argumentos, pero solo necesitas pasar algunos de ellos. En el contexto de la navegación en Flutter, se utilizan parámetros opcionales para pasar datos entre pantallas.

En Flutter, la navegación entre pantallas se realiza a través del widget Navegador. El widget Navigator funciona como una pila, donde puede insertar nuevas rutas en la pila y se mostrarán en la pantalla. Cuando quieras volver a la pantalla anterior, puedes extraer la ruta actual de la pila.

Para pasar datos entre pantallas, puede utilizar parámetros opcionales. Por ejemplo, digamos que tiene una lista de elementos y cuando el usuario hace clic en un elemento, desea navegar a una nueva pantalla que muestra los detalles de ese elemento. Puede pasar el elemento como parámetro opcional a la nueva ruta.

Aquí tienes un ejemplo de cómo puedes hacer esto:

Navegador.push(
  contexto,
  RutaPáginaMaterial(
    constructor: (contexto) => DetailScreen(elemento: elemento),
  ),
);

En la función anterior, estamos insertando una nueva ruta en la pila de Navigator. La nueva ruta se crea utilizando la función MaterialPageRoute, que acepta una función de construcción. La función de creación se utiliza para crear la pantalla que se mostrará. En nuestro caso, estamos creando una pantalla DetailScreen y pasando el elemento como parámetro opcional.

En la pantalla DetailScreen, puede acceder al elemento pasado como parámetro opcional de la siguiente manera:

clase DetailScreen extiende StatelessWidget {
  artículo final;

  DetailScreen({Clave clave, @required this.item}): super(clave: clave);

  @anular
  Construcción de widgets (contexto BuildContext) {
    volver andamio (
      barra de aplicaciones: barra de aplicaciones(
        título: Texto (nombre.del.elemento),
      ),
      cuerpo: Relleno(
        relleno: EdgeInsets.all (16.0),
        hijo: Texto (artículo.descripción),
      ),
    );
  }
}

En la clase DetailScreen, estamos definiendo el elemento como un campo final, lo que significa que debe inicializarse cuando se crea una instancia de la clase. Estamos usando el constructor de clases para inicializar el elemento y marcamos el elemento como @required, lo que significa que debe proporcionarse cuando se crea una instancia de la clase.

A continuación, usamos el elemento para crear la interfaz de usuario en la función de compilación. Estamos utilizando el nombre del elemento como título de la AppBar y la descripción del elemento como texto del cuerpo.

En resumen, la navegación con parámetros opcionales en Flutter es una forma poderosa de pasar datos entre pantallas. Al combinar el poder del widget Navigator con los parámetros opcionales de Dart, puede crear aplicaciones complejas con múltiples pantallas y datos dinámicos.

Siguiente página del libro electrónico gratuito:

99Navegación y enrutamiento en Flutter: Navegación con animaciones

3 minutos