TextField: uso do onChange e controller

O uso do TextField como caixa de inserção de texto é uma das widgets mais usadas. Contudo não apenas inserir o texto, mas trabalhar com alterações no campo de texto com o uso de variáveis é muito importante caso vocês queira que essas variáveis sejam usadas para executarem algo em outra widget dinamicamente.

No caso do TextField existem dois métodos caso você queira executar uma função de retorno de chamada sempre que o texto muda. O primeiro método seria usando o onChanged, no qual você apenas faz um retorno de chamada simples. O segundo seria usando controllers, que é uma maneira mais elaborada de fazer essas mudanças e tornar mais fácil a criação de códigos desacoplados de códigos relacionados a design de tela.

onChange

Para esse caso, basta adicionar o método onChange no TextField e fazer o texto ser alterado dinamicamente.

No código ficaria:

Note que a variável text é trabalhada em uma função no onChange. Para esse caso foi usada uma função síncrona, mas também é possível fazer isso usando uma função assícrona apenas adicionando o async.

controllers

Essa é uma abordagem mais elaborada, mas funciona da mesma maneira que o onChange para este caso.

Ao usar controllers é importante saber que quando você criar um controller, você vai ter que conectar o mesmo ao compo de texto desejado, depois criar uma função que execute algo que deseja e por fim ter algo para escutar tudo que estiver acontecendo no controller.

No exemplo, veja que na linha 7 foi criado o controlador. Das linhas 9 até 13, foi renderizado o controlador para ele ficar disponíel para uso na página (o @override permite que o que estaje dentro dele seja carregado para a página).

Uma vez feito isso, agora seria a realização da conecção do controlador ao campo de texto desejado:

Por questão de exemplo, a função auxiliar para o controller será apenas de print, mas ela pode ser algo mais elaborado, como para fazer chamadas a banco de dados ou apenas trabalhando as variáveis.

Por fim, basta criar algo para ouvir o controller para a realiação das mudanças.

O código final ficaria:

Essa postagem foi baseada em uma explicação na própria documentação do Flutter e adaptada para minha explicação pessoal.

Caso tenham alguma dúvida sobre algo que fiz, podem me mandar uma mensagem ou enviar no grupo que eu posso responder.