🗒️Boas Práticas Criação Formulários

Vou descrever nesta seção, algumas "boas práticas", dicas, para seguir no desenvolvimento de formulários, para que possamos entregar ao usuário uma melhor usabilidade.

Widget Form

É muito importante, e sem dúvidas ajuda muito no desenvolvimento de formulários, a utilização do widget Form, como o pai na árvore de widgets que vão conter os campos de inserção.

O único parâmetro obrigatório para esse widget é a sua key.

Form(
    key: _formKey,
)

final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

Com isso, nós vamos poder utilizar esta chave global, para validar todas as verificações do formulário de uma vez só.

Form Key Validate

Para verificar se o formulário em que a sua chave se encontra, basta chamar a seguinte função:

_formKey.currentState!.validate();

O seu retorno vai ser um bool, se o retorno for false, signifca que o seu formulário não está respondido da maneira correta, de acordo com as suas próprias validações adicionadas.

Validator em cada TextField

É muito simples para adicionar validadores customizáveis para cada um dos seus TextFormFields.

Dentro do Widget TextFormField, é possível passar o seguinte parâmetro:

validator: Validators.minimumCharactersValidator(
 minimunValue: 5,
),

Neste exemplo, é determinado que este campo de texto, deverá ter no mínimo 5 caracteres.

A utilização destes validadores estão descritos melhor no link abaixo:

❗Validators

Tipos corretos para o TextFormFields

Para entregar uma melhor usabilidade ao usuário, nós podemos (devemos!) fazer pré definições para os tipos de teclado que serão mostrados ao usuário para preencher o campo.

Dentro do Widget TextFormField existe um parâmetro de nome keyboardType, onde podemos definir se o teclado vai ser dos tipos:

• datetime

• emailAddress

• multiline

• name

• number

• phone

• text

• streetAddress

Por exemplo, ao criar um campo de texto, que as entradas vão ser apenas númericas, podemos definir o parâmetro da seguinte maneira:

keyboardType: TextInputType.number,

Máscaras para campos de texto

Outra questão para entregar uma melhor usabilidade para os usuários, é de adicionar máscaras para os campos de textos, para que ele não precise, por conta própria, formatar o valor que vai entrar. Alguns exemplos importantes para isso são campos de: telefone, data, cpf, rg, etc...

O exemplo de uso para isso:

inputFormatterList: [
  MasksHelper.cpfMaskFormatter,
],

inputFormatterList: [
  MasksHelper.phoneFormatter,
],

Para entender o uso das máscaras, segue o link abaixo:

🎭Masks Helper