Transmisión de información entre widgets en Flutter

¿Por qué y cómo transmitir información entre widgets?

Cuando construyes una aplicación en Flutter, lo mejor es organizar tu interfaz con widgets anidados. Es decir, cada widget cumple su propio rol, representando una pequeña parte específica de la aplicación. Sin embargo, a menudo un widget hijo necesitará acceder a datos almacenados en su widget padre.

Cuando estás comenzando, puede resultar tentador declarar variables globales para hacerlas accesibles a todos los widgets. Sin embargo, este enfoque complica el mantenimiento y la comprensión del código (ya que es difícil rastrear dónde se usa cada variable). Flutter fomenta la transmisión explícita de datos entre widgets a través de sus constructores.

Cómo transmitir un valor a un widget hijo

Esta idea es fácil de implementar, ya que los widgets están diseñados para recibir información de los widgets que los contienen. Para pasar un valor de un widget padre a un widget hijo en Flutter, simplemente debes modificar los parámetros del constructor del widget hijo.

Por ejemplo, imaginemos que nuestro ParentWidget tiene una información que quiere transmitir a ChildWidget para mostrarla, como un mensaje de bienvenida. Así es como podemos pasar esta variable de un widget a otro:

class ParentWidget extends StatelessWidget {
  final String welcomeMessage = "¡Bienvenido a nuestra aplicación!"; // Mensaje a transmitir

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Widget A (ParentWidget)")),
      body: Center(
        child: ChildWidget(message: welcomeMessage), // Pasa el mensaje al widget hijo
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  final String message; // Mensaje recibido del padre

  ChildWidget({required this.message}); // Constructor para recibir el mensaje

  @override
  Widget build(BuildContext context) {
    return Text(
      message, // Muestra el mensaje transmitido por el padre
      style: TextStyle(fontSize: 20),
    );
  }
}

Explicación simple

1. Mostrar el valor en el hijo: En ChildWidget, se usa la variable message dentro de un Text para mostrar el contenido enviado por el padre.
2. Declaración del valor en el padre: En ParentWidget, se define una variable welcomeMessage que contiene el mensaje "¡Bienvenido a nuestra aplicación!".
3. Transmisión del valor al hijo: Al crear ChildWidget dentro del método build de ParentWidget, se pasa welcomeMessage mediante el parámetro message.

Resultado

Cómo transmitir información de manera ascendente o horizontal

En algunos casos, no solo necesitas transmitir valores de un widget padre a un widget hijo, sino también en la dirección opuesta (del hijo al padre). También puede darse la situación en la que dos widgets en el mismo nivel necesiten compartir información.

Por ejemplo, un botón «Validar» debe asegurarse de que todos los TextFields estén completados antes de enviar la información.

Esta necesidad de transmitir y actualizar datos en la interfaz se conoce como gestión de estado. Existen varias formas de gestionar el estado en Flutter, dependiendo del nivel de experiencia del desarrollador:

• setState → El método más básico, ideal para principiantes.
• Provider → Un enfoque más estructurado y flexible.
• Riverpod → Una solución moderna y optimizada que simplifica la gestión del estado.