Etapas para construri uma tela no Flutter

Resumo

Construir telas pode ser muito simples e fácil, porém pode se tornar um grande desafio quando a tela a ser construida é recheada de elementos. Devemos tomar cuidado com o código, com a organização e em como deve se comportar.

Pensar antes de Agir

Exatamente, não é só na regra de negócio que devemos tirar bastante tempo pensando em como produzir, mas também devemos fazer o mesmo para construção de telas, se seu único objetivo é o que o usuário final veja sua tela perfeitamente elaborada com animações e posicionamentos estratégicos, porém seu código parece uma macarronada que em um único arquivo exista mais de seis mil linhas, tenho que dizer que você precisa melhorar como programador.

O código é tão importante quanto a Tela

Sim, você pode poupar muito tempo extraindo os Widgets da maneira correta, não colocar lógica nos Widgets, usar os Widgets corretos, como por exemplo: No lugar de usar um if, use um Visibility que é um Widget preparado para casos que necessite mostrar algo dependendo da condição, os nomes claros e objetivos ajudam demais, enfim estou falando de Clean Code.

Monte a árvore de Widgets na sua mente primeiro

Pois é, imagine que você quer construir uma tela de autenticação simples, você deve pensar em com será construída estruturalmente falando, isto é:

Vou colocar um Scaffold, e no body um SingleChildScrollView primeiro para já ter a possibilidade de fazer a rolagem da tela, depois vou colocar uma Column como filho e dentro da Column irei colocar dois TextFormField, talvez eu coloque um SizedBox entre eles e por último um Botão para entrar.

Claro que isso é apenas um exemplo, mas é o que estou querendo dizer com o montar a árvore de widgets na sua mente primeiro.

Erros comuns

Eles são cometidos exatamente por falta de pensar nos casos acima, o que acontece é o dev montar toda a tela e esquecer de colocar a opção da rolagem da tela que dependedo de como foi estruturada sua tela, fará com que você gaste muito tempo tentando arrumar os erros de overflow, alinhamentos e espaçamentos.

Na questão da responsividade também, que deve ser pensado antes de começar, faça um cálculo minuciosamente de como será feito e procure as melhores práticas para que não faça muito código desnecessário para se chegar um resultado esperado.

Preste atenção nos pequenos detalhes, como os efeitos que devem ter, tamanho de botões, formatações nas entradas de texto e etc...

Claro que isso que estou falando exige um certo conhecimento sobre UI/UX, mas é importante você saber pelo menos o básico para não fazer bizarrices.