Flutter Deep Dive, Parte 2: “RenderFlex children have non-zero flex…”
Continuando con la traducción parte dos! 😃
Este es la parte dos de la serie de 4. Puedes encontrar los otros aquí:
- Parte 1: “RenderFlex children…”, entrando a la piscina de bebés
- Parte 2: Dando del salto
- Parte 3: Un Flex no es un flex
- Part 4:El algoritmo del layout Flex
Bienvenido a la segunda parte de nuestra serie sobre cómo tratar con RenderFlex y otros errores similares en Flutter. Aquí, vamos a echar un vistazo a la “conversación” básica que se desarrolla durante la maquetación, obtener una visión general del “ pastel de tres capas “ de Flutter y te daré una introducción a los Widgets en los que vamos a profundizar mucho más en la Parte 3.
Así que tome un trago (y tal vez algún medicamento para el dolor de cabeza) y ¡empecemos!
Dando el salto
En la primera parte nos metimos en la piscina de los bebés, pero aquí estamos yendo mucho más profundo. No puedo pensar en un mejor lugar para empezar que explicando lo que está sucediendo en términos que puedan ser entendidos por un ser humano.
Primero, debes entender que hay unos cuantos Widgets que dependen de otros para que les digan qué tamaño deben tener. Algunos de estos Widgets son Flex, Column, Row, SingleChildScrollView y List.
Cuando se presentan los elementos de la interfaz de usuario en Flutter, hay una especie de “conversación” que continúa. Echemos un vistazo….
En nuestro ejemplo, tenemos tres Widgets. El primero es “Parent”. El padre tiene un hijo y un abuelo. Parent es uno de los Widgets que necesita que le digan qué tamaño debe tener porque, al igual que un padre de verdad, no tiene ni idea de lo que está pasando.
- Abuelo a Padre: “¿Qué tan grande quieres ser? Puedes ser tan grande como lo quieras, todo hasta el infinito.”
- Padre a Abuelo: “Dame un minuto y regresamos al tema.”
- Padre a Hijo: “‘¿Qué tamaño quieres ser?”
- Hijo a Padre: “Quiero ser tan grande como sea posible, hazme tan grande como tu me dejes ser!”
El padre está confundido y mira el suelo. El abuelo no le dijo qué tamaño debía tener, el hijo tampoco le dijo qué tamaño debía tener, y lo único que hay en el try /catch y captura es un comentario de un recibo de hace tres meses sobre el martes de tacos.
Es entonces cuando el humo mágico se escapa de su portátil, la pantalla se vuelve negra y su dispositivo de prueba muestra “la pantalla roja de la muerte”.
Lo que está sucediendo es que el hijo quiere “flex” hasta el infinito (los hijos tienen una flexión que no es cero) y el Abuelo dice que puede ser tan grande como quiera (pero las limitaciones de altura entrantes son ilimitadas).
¿Tiene esto un poco más de sentido ahora? Bien. Ahora que sabes lo básico, átate una cuerda a la cintura y vamos a zambullirnos en la madriguera del conejo.
Under the Hood
Supongo que ya conoces las capas Widget, Element y Render, pero si no, aquí está la versión tl;dr (muy largo;no leí) de “Flutter’s Three Layer Cake”::
- La capa de Widgets contiene Widgets, que son como planos de lo que quieras hacer.
- La Capa de Elementos es donde se encuentran los Elementos que son una especie de representaciones esqueléticas que se construyen a partir de cada Widget. Son como maquetas o conchas vacías. Un Elemento sólo contiene un Tipo y, si lo hay, una Clave. Durante el proceso de renderización de cada frame, vas a comprobar si el Widget de este frame ha cambiado desde el último frame. Si lo tienen, entonces puedes construir uno. Si no, déjalo en paz y sigue adelante.
- La capa Render contiene los objetos que los desarrolladores de Android e iOS asociarían más estrechamente con “Views” (Android e iOS no tienen realmente un equivalente a las capas Widget o Element). Los objetos de renderizado se crean (básicamente) a partir de los elementos y sólo se cambian cuando es necesario.
Hay mucho más que eso pero, para este artículo, no necesitamos entrar en más detalles. Si quieres profundizar en las capas Widget, Element y Render, te sugiero que empieces con “Flutter, what are Widgets, RenderObjects and Elements?”, por Norbert Kozsir.
Como nota propia les recomiendo esa lectura de Norbert
Citando mal a Shakespeare: “Una Rosa, es una Rosa, es un Sandwich de Pavo ”
Hay tres cosas que debe asegurarse de entender cuando trate con Rows y Columns:
FlexFlexibleFlexFit
<sarcasm alert>
Estas son fáciles de comprender y grabarse en la cabeza:
- Uno de ellos es un widget de diseño multihijos que admite varios hijos.
- El segundo está clasificado como un widget de diseño multihijos, pero en realidad no admite más de un hijo. (Espera, ¿qué?!?)
- El tercero determina cómo encaja el segundo en el primero, determinando el tamaño del primero. Pero, debido a que hay factores externos que le dicen que se siente y se calle, realmente no hace mucho de nada… bueno, excepto evitar que el segundo trate de forzar al primero a ser más grande de lo que puedas imaginar (ya sabes, como “la Fuerza” en Star Wars). Así que, en cierto modo, supongo que ayuda a determinar el tamaño de la primera…. pero no realmente.
¡Mira lo fácil que fue!
</sarcasm alert>
(Eso es una broma, gente… Es endemoniadamente confuso.)
También es donde vamos a retomar las cosas en la tercera parte. ¡Nos vemos allí!
Gracias a Muhammed Salih Guler.
Puedes seguir al autor en Twitter:
Y al traductor en:
