Flutter Deep Dive Parte 1: “RenderFlex children have non-zero flex…
Que tal Fluterians, esta ocasión realizaremos la traducción de un persona más de Flutter Community quien no solo es uno de los miembros si no es Editor de todo lo que es escribe y se acepta para publicarse, y cual siempre son punta de flecha para mucho del trabajo que realizamos aquí en la comunidad en Español, sin mas presentación les dejo su cuenta de Scott Stoll y lo pueden encontrar en Twitter.
Este articulo es parte de una 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
Además de hablar de Flutter y avergonzarme frente a un público de dos continentes, recientemente decidí hacer un deep dive. Todos mis amigos hacen deep dive en cosas geniales como animación, gestión estatal, gestos o pruebas.
¿Yo? Decidí hacer un deep dive en un mensaje de error.
Pero este no es un mensaje de error común. Si InheritedWidget
es la Belleza de Flutter (y lo es), entonces “RenderFlex children have non-zero flex but incoming height constraints are unbounded” es nuestro Boogeyman (El Coco, Uomo Nero, Бугимен, Hombre Boogeyman, بعبع , Mumus, Croque-mitaine, Baba Yaga, John Wick).
También hay que tener en cuenta que nuestro Boogeyman tiene algunos hermanos y hermanas que se pueden ver de vez en cuando:
- “RenderConstrainedBox object was given an infinite size during layout.”
- “BoxConstraints forces an infinite width.”
- And more you’ll be able to recognize after you‘ve read this deep dive.
Relájate, todos estos errores no son más que pequeñas variaciones sobre un solo tema. Los mensajes de error son diferentes porque en cada uno de estos casos el error está siendo causado por algo diferente pero, al final, todo se reduce al mismo problema:
Algo está tratando de ser infinitamente grande, no hay nada que lo detenga, y necesitas arreglar eso.
Una vez que entiendas cómo funcionan las cosas debajo de la tapa, será cada vez más fácil saber exactamente qué hacer cuando el Boogeyman salga de debajo de tu cama.
Envía a John Wick, por supuesto.
Entrando en la piscina del bebé
Primero quiero ofrecer una versión rápida de esto para aquellos que no quieren sumergirse en aguas profundas. Yo lo llamo, “La Versión de la Piscina para Bebés”.
Tenga en cuenta que todos estos ejemplos de código están formateados de forma personalizada para que sean un poco más fáciles de leer. No formateo mi código de trabajo de esta manera….
“RenderFlex children have non-zero flex but incoming height constraints are unbounded.”:
Este es un ejemplo simple de un widget roto que causará este error:
Lo que está sucediendo aquí es que una Row/Column
no está pasando las restricciones de tamaño por su padre (“Incoming Constraints are Unbounded”) pero su hijo está tratando de “flex” para ser lo más grande posible (“Render Flex Children Have Non-Zero Flex”). La razón por la que esto es un problema es que ya sea el padre o el hijo tiene que decirle a la Row/Column
qué tamaño debe tener, pero eso no está sucediendo. El hijo dice: “Vete al infinito”, y el padre dice: “Haz lo que quieras”.
La solución rápida para la piscina de bebés es cambiar elmainAxisSize
del Row/Column
a MainAxisSize.min
, y luego envolver al hijo que quiera ser infinitamente grande en un archivo Expanded
.
“BoxConstraints forces an infinite height (or width).”:
Su Row/Column
tiene un hijo que está tratando de tener una altura/anchura infinita y no hay ninguna restricción, que es sólo una situación ligeramente diferente a la de antes. Una forma en que esto puede suceder es si se ajusta la alto/ancho
a double.infinity
en algo que está dentro de una Row/Column
. Eso no es malo, lo hacemos todo el tiempo. Sin embargo, si su hijo está en una Row
o Column
que no está limitando el tamaño del hijo, ahora tenemos problemas.
Este error puede estar en mainAxis
o el crossAxis:
- Si el problema esta en el
mainAxis
puedes corregirlo poniendo al hijo infractor dentro de unExpanded
. - Si se encuentra en el
crossAxix
entonces necesitas poner elRow/Column
dentro de unExpanded
en su lugar.
“RenderConstrainedBox object was given an infinite size during layout.”:
Este es un tanto tierno. Lo obligué a que ocurriera de esta manera:
¿Cómo lidiamos con esto? Bueno, hay algunas cosas que puedes intentar, pero no todas tendrían éxito:
- Dar al
Container
un height especifico arreglara esto. - Dar al
SizedBox
un height especifico arreglara esto. - Envolviendo el
Container
con unExpanded
no lo corregirá. De hecho esto causara un overflow en la parte inferior. - Envolviendo el
SizedBox
con unExpanded
provocara: “Incorrect use of ParentDataWidget.Expanded
widgets must be placed directly insideFlex
widgets.”
¿El último error, acerca de ParentDataWidget? significa que un Expanded
solo puede ser usado dentro de un Row
o Column
pero intentaste usarlo en otro lugar.
Entonces, esa fue la piscina de bebés. ¿A poco no fue fácil?
¿Listo par más? ¿Te sientes aventurero… o sólo masoquista? Entonces vayamos un poco más abajo en la madriguera del conejo con la Parte 2!
Gracias a Paulina Szklarska, Nash, Nawal Alhamwi, Tomek Polański y Muhammed Salih Guler.
Puedes seguir al autor en Twitter:
Y al traductor en: