Como estilizar seu TextFormField utilizando Flutter
Se você desenvolve aplicativos utilizando Dart e Flutter, muito possivelmente você irá se deparar com formulários, seja ele de login, de cadastros, de registros, etc. No presente artigo, serão dadas algumas dicas de como deixar o seu formulário visualmente bonito e com formatações específicas.
Começando pelo tipo de dado a ser digitado pelo usuário. No seu TextFormField (widget de campo de texto) ou similar, haverá a propriedade “keyboardType”, cuja mesma pode ser de diversos tipos, como number, phone, text, emailAddress, conforme Figura 1:
Se deixamos o tipo como number, ao aparecer o teclado do aparelho, o resultado será o da Figura 2:
Para deixar um texto no campo, como um placeholder do HTML, é necessário utilizar a propriedade hintText, que o texto aparecerá, conforme desejado. Será necessário colocar a propriedade citada em um widget chamado inputDecoration, responsável pela decoração do campo de texto.
Para deixar seu campo de texto com ícones ilustrativos no mesmo, você necessitará do uso de dois widgets: prefixIcon e suffixIcon. O primeiro deles aparecerá àesquerda do seu campo de texto, enquanto o segundo citado aparecerá à direita do seu input.
– prefixIcon:
Para deixar o ícone alinhado de forma igualitária no campo de texto, foi utilizado um Padding com espaçamento de 5 para todas as direções: left, right, bottom e top.
– suffixIcon
O widget IconButton foi utilizado para posicionar o ícone no campo, podendo o mesmo ser estilizado, com cor azul e ter alguma ação de eventos ao ser pressionado, conforme demonstrado no onPressed.
Nesse caso, ambos os widgets foram utilizados no campo de endereço, tanto prefixIcon como suffixIcon:
Essas foram somente algumas dicas de como estilizar seus campos de texto em sua aplicação em Dart/Flutter. Há muitas formas de isso ser feito, mas, com o que foi demonstrado acima, seu formulário ficará muito bonito, visualmente. A foto a seguir é a do formulário completo de cadastros de uma aplicação:
