Flutter - Usando o widget TextField - II

Hoje veremos o widget TextField que permite a entrada do usuário em aplicações Flutter.

O Flutter é um SDK de aplicativo móvel do Google que ajuda a criar aplicativos móveis modernos para iOS e Android usando uma única (quase) base de código.

Se você não conhece o Flutter veja o meu artigo :  Flutter - Primeiros contatos e impressões

Continuando o artigo anterior...

Retornando o valor de um TextField

Como os TextFields não têm um ID como no Android, o texto não pode ser recuperado sob demanda e deve ser armazenado em uma variável ao alterar ou então usar um controlador. Temos assim duas abordagens para recuperar o valor de um TextField:

1 - A maneira mais fácil de fazer isso é usar o callback onChanged e armazenar o valor atual em uma variável simples. Aqui está o código de exemplo para isso:

String valor = "";

TextField(
    onChanged: (text) {
        valor = text;
          print("TextField: $text");
   }
)

Sempre que o texto mudar, o callback é invocado. Uma desvantagem dessa abordagem é que ela não funciona com widgets TextFormField.

Nota: Callback é uma função que é usada como "callback". Ela é tipicamente passada como argumento de outra função e/ou chamada quando um evento for acontecido, ou quando uma parte do código receber uma resposta de que estava esperando.

2 - A segunda maneira de fazer isso é usar um TextEditingController. O controlador é anexado ao TextField e nos permite ouvir e controlar o texto do TextField também.

TextEditingController controller = TextEditingController();
TextField(
  controller: controller,
)

Obs: No flutter, os controladores são um meio de dar controle ao widget pai sobre o estado do seu filho.

Vejamos esta abordagem com mais detalhes.

Usando um TextEditingController

Para retornar o valor informado em um TextField usando um TextEditingController temos que cumprir as seguintes etapas:

  1. Criar um TextEditingController
  2. Fornecer o TextEditingController para o TextField
  3. Exibir o valor atual do TextField

Então para criar e fornecer o TextEditingController para o TextField vamos criar um StatefulWidgtet para WidgetsBasicos da mesma forma que fizemos no artigo anterior.

class WidgetsBasicos extends StatefulWidget {
  @override
  _WidgetsBasicosState createState() => _WidgetsBasicosState();
}
class _WidgetsBasicosState extends State<WidgetsBasicos> {
  final myController = TextEditingController();
  @override
  void dispose() {
    // limpa o controller quando for liberado
    myController.dispose();
    super.dispose();
  }
  @override
   Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retorna o valor de TextField'),
      ),
      body: _widgetTextField(),
      floatingActionButton: FloatingActionButton(
        // quando o usuário pressionar o botão
        // exibe um alerta contendo o texto que 
        // foi informado no TextField
        onPressed: () {
          return showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                // Retorna o texto que foi informado
                // usando o TextEditingController.
                content: Text(myController.text),
              );
            },
          );
        },
        tooltip: 'Exibir o valor!',
        child: Icon(Icons.text_fields),
      ),
    );
  }
  

Criamos um controlador TextEditingController e definimos o método dispose() para liberá-lo.

A seguir no widget Scaffold , na propriedade body criamos o método _widgetTextField onde vamos criar o TextField.

No botão floatingActionButton do Scaffold, no callback onPressed, definimos um AlertDialog para exibir o valor informado no TextField quando o botão for pressionado.

A seguir temos o código do método _widgetTextField:

Padding _widgetTextField() {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextField(
        controller: myController,
      ),
    );
  }

O widget TextField esta envolvido por um Padding que incluir espaços e atribui o TextEditingController - myController - ao controller.

O resultado pode ser visto abaixo:

Em outro artigo veremos outros recursos do TextField.

Pegue o arquivo main.dart aqui: main_dart_RetornaValor.zip

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti