Capítulo 46 — Os layouts: Row, Column, Stack e as restrições

Nível: iniciante / intermediário Duração estimada: 10 h Pré-requisitos: capítulo 45 — StatelessWidget e StatefulWidget O que você saberá fazer ao final: posicionar qualquer widget exatamente onde você quiser na tela, entender e corrigir os erros de layout do Flutter, e reproduzir um mockup completo sem ficar tateando.

46.0 — Objetivos do capítulo

Ao final deste capítulo, você será capaz de:

• enunciar a regra de layout do Flutter em uma frase;
• explicar o que é uma restrição (constraint) e por que ela desce pela árvore;
• usar Container conhecendo suas armadilhas;
• escrever um EdgeInsets em suas quatro formas;
• decorar uma caixa com BoxDecoration: cor, borda, cantos arredondados, sombra;
• escolher entre Padding, SizedBox, Center e Align;
• empilhar widgets verticalmente com Column;
• alinhar widgets horizontalmente com Row;
• distinguir eixo principal e eixo transversal;
• usar os seis valores de MainAxisAlignment;
• usar os valores de CrossAxisAlignment;
• configurar mainAxisSize e saber por quê;
• ler um erro RenderFlex overflowed e corrigi-lo de três maneiras diferentes;
• distribuir o espaço com Expanded, Flexible e Spacer;
• explicar a diferença exata entre Expanded e Flexible;
• quebrar linha automaticamente com Wrap;
• sobrepor widgets com Stack e posicioná-los com Positioned;
• manter várias páginas na memória com IndexedStack;
• impor uma proporção entre largura e altura com AspectRatio;
• dimensionar em porcentagem com FractionallySizedBox;
• forçar restrições com ConstrainedBox e BoxConstraints;
• entender o custo de IntrinsicHeight;
• tornar uma página rolável com SingleChildScrollView;
• evitar o notch e a barra do sistema com SafeArea;
• depurar visualmente um layout;
• reconstruir um mockup de cima para baixo com um método reproduzível.