Comunicación entre Widgets
Este artículo es una traducción al español de la que escribí originalmente y lo puedes encontrar en el siguiente enlace.
He visto muchas veces esta pregunta en StackOverflow y en otros foros/redes sociales, cuando empezamos con Flutter, tenemos la duda de cómo podemos comunicarnos entre widgets, es decir de Widget padre a Widget hijo y viceversa.
Tenemos muchas formas y maneras de poder comunicar Widgets entre ellos.
Vamos a repasar cada una de estas, desde la más sencilla, hasta la más óptima.
Escenario
Como escenario vamos a tener 2 tabs y 2 widgets hijos.
Los 3 widgets los creamos Stateful ya que vamos a actualizar el contenido, parte del código sería así.
Parent
Child 1
Child 2
Resultado
Ahora, si ven la UI de nuestro ejemplo, hemos creado varios botones de acción, cada acción representa lo siguiente:
Acción 1 Actualizar el contenido del widget Child 1 desde el widget Parent.
Acción 2 Actualizar el contenido de widget Parent desde el widget Child 1.
Acción 3 Actualizar el contenido del widget Child 2 desde el widget Child 1.
Acción 4 Cambiar de tab desde el widget Child 1 hacia el widget Child 2.
Vamos a ver paso a paso cada una de estas acciones y qué opciones tenemos para realizarlas.
Acción 1
Actualizar el contenido del widget Child 1 desde el widget Parent.
Resultado
Opción 1:
Actualizar el widget pasando un parámetro (definido dentro del widget Child). Luego necesitamos modificar el Child para mostrar el parámetro si es que existe alguno.
Código actualizado:
Parent
Child 1
Nota: Estamos preguntando si el parámetro widget.title no trae un valor nulo, de otra manera se mostrará “Page 1”.
Opción 2:
Definir un GlobalKey con la clase State de nuestro widget Child 1. Tendremos que cambiar la clase a pública, así que quitamos el guión bajo para que nuestra clase quede así : Child1PageState.
Establecemos el GlobalKey como key de nuestro widget Child 1.
Creamos un método en nuestro widget Child 1 el cual refrescará el contenido con un nuevo valor.
Llamamos al método definido en Child1State desde nuestro widget Parent.
Código actualizado:
Parent
Child 1
Opción 3:
Usando InheritedWidget para guardar los datos desde el widget Parent y restaurar los datos desde el widget Child 1.
Después de actualizar el widget Parent con el nuevo valor, podemos acceder a los datos del InheritedWidget desde cualquier widget que se encuentre en nuestro árbol de Widgets.
Código actualizado:
Parent and InheritedWidget
Child 1
Nota: Si te gusta este modo, te recomiendo que revises este gran Package llamado: ScopedModel
Acción 2
Actualizar el contenido de widget Parent desde el widget Child 1.
Resultado
Opción 1:
Usando CallBacks, crear un método en el widget Parent, pasar el método como callback desde nuestro widget Parent a nuestro widget Child.
Crear un parámetro callback en nuestro widget Child.
Ejecutar el callback desde nuestro widget Child.
Código actualizado:
Parent
Child 1
Acción 3
Actualizar el contenido del widget Child 2 desde el widget Child 1.
Resultado
Opción 1:
Debido a que el widget Child 2 no está construido aún ( Estamos usando tabs y el widget visible es el Child 1)
Usar InheritedWidget para guardar el valor es la mejor opción.
Código actualizado:
Parent
Child 1
Child 2
Acción 4
Cambiar de tab desde el widget Child 1 hacia el widget Child 2.
Resultado
Opción 1:
Pasar el tabController como parámetro desde el widget Parent hacia el widget Child 1.
Código actualizado:
Parent
Child 1
Opción 2:
Pasar un callBack desde el widget Parent hacia el widget Child 1 y cambiar el índice de nuestro tabController.
Código actualizado:
Parent
Child 1
Opción 3:
Poner el tabController dentro de nuestro InheritedWidget, llamar a este desde nuestro widget Child 1 y cambiar el índice de nuestro tabController.
Código actualizado:
Parent
Child 1
Conclusión
Es bueno usar las herramientas que Flutter provee para que puedan ver el performance de cada uno, lo ideal es que al momento de pasar valores se reconstruyan los mínimos widgets posibles.
Compártenos si tienes otra forma de comunicar Widgets.
Puedes revisar el código fuente en mi repo de flutter-samples https://github.com/diegoveloper/flutter-samples
References
https://flutter.dev/docs/development/ui/interactive
Sígueme en Twitter:
