Layouts y maquetación

En la lección anterior quedó pendiente una frase: pedir un tamaño no es lo mismo que obtenerlo. De eso trata esta lección, y es el único concepto del framework que merece que nos detengamos de verdad. Un desarrollador que ha entendido las restricciones de Flutter ya no se encuentra con rayas amarillas ni con excepciones de maquetación; quien no las ha entendido se pasa el tiempo añadiendo Expanded al azar hasta que la pantalla deja de quejarse.

La dificultad viene de un hábito importado de la web. En CSS, un elemento tiene un tamaño propio y el navegador arbitra después. En Flutter ocurre al revés: el padre impone restricciones, el hijo elige su tamaño dentro de esas restricciones y el padre decide dónde colocarlo. Tres frases, enunciadas así en la documentación oficial, de las que se derivan absolutamente todos los comportamientos de maquetación, incluidos los que parecen absurdos.

Recorreremos este modelo y después los widgets que lo aprovechan: Row, Column, Expanded, Flexible, Stack. Provocaremos a propósito el desbordamiento horizontal —el error de maquetación más habitual de todo Flutter— y veremos después cómo producir una pantalla que quepa tanto en un teléfono de 360 píxeles de ancho como en una tableta.