Layouts e organização da tela

Na lição anterior, uma frase ficou em aberto: pedir um tamanho não é o mesmo que obtê-lo. É esse o assunto desta lição, e é o único conceito do framework que realmente merece uma pausa. Quem entendeu as restrições do Flutter não encontra mais listras amarelas nem exceções de layout; quem não as entendeu passa o tempo adicionando Expanded aleatoriamente até a tela parar de reclamar.

A dificuldade vem de um hábito trazido da web. Em CSS, um elemento tem um tamanho próprio e o navegador arbitra depois. No Flutter, é o inverso: o pai impõe restrições, o filho escolhe seu tamanho dentro dessas restrições, e o pai decide onde posicioná-lo. São três frases, enunciadas assim na documentação oficial, das quais decorrem absolutamente todos os comportamentos de layout, inclusive os que parecem absurdos.

Vamos percorrer esse modelo e, em seguida, os widgets que o exploram: Row, Column, Expanded, Flexible, Stack. Vamos provocar de propósito o overflow horizontal — o erro de layout mais comum em todo o Flutter — e depois veremos como produzir uma tela que funcione tanto em um celular de 360 pixels de largura quanto em um tablet.