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.

Deep Dive Part 1, by Scott Stoll. Twitter: @scottstoll2017

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).

Da Boogeyman (Image CC-0)

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:

Este Widget causara un error de tipo RenderFlex

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.

El mismo widget, Corregido

“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 Rowo Column que no está limitando el tamaño del hijo, ahora tenemos problemas.

Posiblemente el pero código que he escrito, pero da justo en el clavo

Este error puede estar en mainAxis o el crossAxis:

• Si el problema esta en el mainAxis puedes corregirlo poniendo al hijo infractor dentro de un Expanded.
• Si se encuentra en el crossAxix entonces necesitas poner el Row/Column dentro de un Expanded 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:

En realidad, fue necesario un cierto esfuerzo para quebrarlo de la manera correcta para causar este error….

¿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 un Expanded no lo corregirá. De hecho esto causara un overflow en la parte inferior.
• Envolviendo el SizedBox con un Expanded provocara: “Incorrect use of ParentDataWidget. Expanded widgets must be placed directly inside Flexwidgets.”

¿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:

Scott Flutter (@scottstoll2017) | Twitter

Flutter Community (@FlutterComm) | Twitter

Y al traductor en:

Argel Bejarano (@ArkangelB) | Twitter

FlutterES (@EsFlutter) | Twitter