Como utilizar máscara de números decimais em Dart/Flutter

Quando utilizamos o Dart com o framework Flutter, grande parte das pessoas possuem dificuldades em formatar os números com vírgula, em formato de dinheiro (real), por exemplo. No presente artigo, será explicado um passo a passo de como fazer essa conversão em um campo do tipo TextFormField.

Primeiramente, ao abrir o seu respectivo projeto, seja no Android Studio ou no Visual Studio Code, deverá ser inserida a seguinte linha no arquivo pubspec.yaml:

flutter_masked_text: ^0.8.0

De acordo com a Figura 01 abaixo, é necessário tomar um devido cuidado com a inserção da linha e com a identação da mesma, pois, caso não esteja correta, poderá não funcionar. A linha deve ser inserida abaixo do cupertino_icons:

Após a adição da linha no arquivo pubspec.yaml, é necessário importar o pacote referente a máscara de textos no início da(s) pagina(s) que será(ão) utilizada(s) a(s) máscara(s), ou seja, em toda a página que a mesma for necessária, deverá conter o import respectivo, conforme Figura 02:

Por conseguinte, para o campo do tipo input que será utilizado, deverá ser criado um controller para o mesmo, passando o new MoneyMaskedTextController, após a declaração da variável, conforme exibido na Figura 03. Caso a linha abaixo dela fique vermelha, a importação do pacote não foi realizada do jeito correto e, será necessário revisar a importação e o arquivo pubspec.yaml:

Dessa forma, ao criar o TextFormField, a máscara do input foi alterada para valores somente numéricos e, facilitando ao usuário para digitar o campo.

O CONTROLLER deve ser passado ao criar o campo, pois, sem isso, a operação feita não funcionará.