¿Cómo Flutter logra dibujar un widget en pantalla📱?🤔
Parece una pregunta simple, pero hace parte de los conocimientos avanzados de Flutter y saber responderla de forma adecuada potenciará el rendimiento de tus soluciones y te ayudará a entender que no solo se debe a su tecnología de renderizado, sino que especialmente por la gran arquitectura interna que tiene. No siendo más, comencemos: 🧑🏽💻👩🏻💻.
Comencemos nuestro recorrido entendiendo que existen tres arboles que se ejecutan en paralelo en Flutter 🤯. ¡No te sorprendas! Aunque en el pasado (a modo de chiste) hemos dicho que todo en Flutter es un widget, la realidad es que existen más elementos de fondo que nos ayudan a implementar nuestras soluciones.
La siguiente es un pregunta tipo examen: ¿Qué es un widget? Según la documentación, un widget es una descripción inmutable de una parte de la interfaz de usuario (enlace).
Déjame preguntarte, si los widgets son elementos inmutables (que no cambian) ¿tus aplicaciones en Flutter, entonces, son estáticas? 🤔
En Twitter hice esta pregunta para ver si alguien conocía la respuesta:
La mayoría de las personas respondieron que no sabían cómo explicarlo.
Como ves, el código base de Flutter en la definición de widget, tiene la anotación @inmutable lo que indica que, en efecto, estos elementos son estáticos. Entonces, ¿cómo se logra el dinamismo en Flutter? Para ello, debo hablarte acerca de los Element y el RenderObject.
“Es una instancia de un widget en una ubicación particular en el árbol”(enlace). **Esta definición, nos deja en claro que existe una instancia de un element por cada widget en el árbol; por lo tanto, no es difícil deducir que en nuestras aplicaciones, así como tenemos un árbol de widgets, tenemos uno de elementos. Estas instancias son mutables, es decir, pueden cambiar y comunicarse con el RenderObject..
Controla todos los tamaños, layouts y contiene toda la lógica necesaria para dibujar el widget al que esta asociado. Esa es la razón por la que el RenderObject es muy costoso de instanciar. Al igual que en el escenario anterior ,también podemos concluir que tenemos un árbol de RenderObject a la par de nuestro árbol de widgets y nuestro árbol de elementos.
Para unificar estos tres conceptos, he creado la siguiente ilustración:
Con estos conceptos podemos entender todo el ciclo de vida relacionado al dibujo de widgets en nuestras aplicaciones. A continuación, vamos a analizarlos🧐.