Nem a NASA consegue. Aqui estão 5 truques de depuração no Flutter

Se você já trabalhou com um designer, você já conhece esta verdade universal: Designers não têm olhos. Eles têm visão de telescópio James Webb, nível NASA.

Você mostra a sua UI todo orgulhoso — nítida, limpa, perfeita. E eles apertam os olhos por 0,3 segundos antes de dizer: “Humm… esse botão está 0,75 pixels fora de centro.”

Enquanto isso, você está lá parado tipo: MANO, QUE CONFIGURAÇÕES VOCÊ TÁ USANDO?

Eu dei zoom de 800%, inverti as cores, liguei o modo escuro, sacrifiquei uma caneca de café… E ainda não consigo ver nada. Mas beleza.

Então, aqui estão 5 truques para depurar a UI do Flutter como um profissional. Porque, da próxima vez que seu designer apontar problemas de alinhamento visíveis apenas para águias e satélites, você estará realmente preparado.

1. Use debugPaintSizeEnabled — Veja o Esqueleto do seu Layout.

Às vezes, sua UI parece ótima… até que o designer inclina a cabeça 12 graus e diz:

“O espaçamento (padding) parece… espiritualmente incorreto.”

Ative isso e boom: caixas em volta de tudo. Como ativar:

void main() {
  debugPaintSizeEnabled = true; // highlight layout boundaries
  runApp(MyApp());
}

De repente, seus erros de margem tornam-se visíveis.

2. Use o Flutter Inspector — A Ressonância Magnética da sua UI.

Abra o DevTools → Inspector → “Select Widget Mode”. Toque em qualquer widget e veja:

• Constraints exatas
• Padding
• Margens
• Render object
• Parents (Pai)
• Children (Filhos)

É como fazer uma cirurgia na sua UI. Dica de mestre: A aba “Layout Explorer” é nível deus para depurar o Flex. Quando a sua Row encolhe o seu texto sem motivo nenhum, o Layout Explorer vai te mostrar exatamente quem está fazendo bullying com quem.

3. Adicione Blocos de Cores Temporários — O Truque de Depuração “Homem das Cavernas”.

Quando você tem um layout que simplesmente não alinha, envolva os elementos em um Container…

Container(
  color: Colors.purple.withOpacity(0.2),
  child: Text("UnkownSpace")
)

Por que funciona:

• Visualiza widgets invisíveis.
• Mostra por que o espaço está estranho.

Designers odeiam este truque. Desenvolvedores amam. Humanos voltam a entender sua própria UI.

4. Use a ferramenta “Slow Animations” — Capture transições desalinhadas.

Às vezes o designer diz: “Aquele modal desliza 1 pixel além da conta”.

Você pisca. Você não vê nada. Mas beleza.

Ative as Slow Animations (DevTools → Flutter Inspector → Ícone de relógio). Isso desacelera todas as animações em 5x, ajudando você a identificar:

• “Pulos” (bounces) estranhos
• Transições desalinhadas
• Saltos em animações Hero

5. Use LayoutBuilder + Logs para capturar problemas de Constraint.

Sempre que seu widget se comporta de forma diferente em cada dispositivo, geralmente é um problema de constraint (restrição).

Jogue um print rápido para ver o que o “pai” está passando para você:

LayoutBuilder(
  builder: (context, constraints) {
    print("MaxWidth: ${constraints.maxWidth}");
    print("MaxHeight: ${constraints.maxHeight}");
    return child;
  },
);

Isso revela:

• Por que o seu Expanded está “bravo”.
• Por que aquele container de repente ficou com 0 de altura.
• Por que um widget desaparece no modo paisagem.

Todos nós já passamos por isso — apertando os olhos contra a tela, com zoom em 500%, movendo um widget 1px de cada vez e questionando nossas escolhas de vida.

Então compartilhe suas dores, seus momentos de “por que isso ainda está desalinhado?” e aqueles bugs de 1px que roubaram a sua paz.