Flutter - Usando o widget TextField - I

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

Usando campos de texto : TextField

Os campos de texto - TextField e TextFormField - permitem que os usuários digitem texto em um aplicativo. Eles são usados ​​para criar formulários, enviar mensagens, criar experiências de pesquisa e muito mais.

Parar criar o projeto usado neste exemplo abra o Visual Studio Code e tecle CTRL+ SHIFT+P para abrir a paleta de comandos e a seguir selecione a opção : Fluter:New Project

A seguir informe o nome do projeto : flutter_textfield1 e tecle ENTER

Na janela de diálogo a seguir selecione a pasta onde o projeto vai ser salvo e clique em :
Select a folder to create the project in

O Flutter vai criar um projeto padrão onde todo o código da aplicação vai estar no arquivo main.dart dentro da pasta lib do projeto.

Substitua o código do arquivo main.dart gerado pelo código usado nos exemplos do artigo.

O TextField é o widget de entrada de texto mais usado, seja com o teclado do hardware seja com um teclado na tela, e, por padrão é decorado com um sublinhado. 

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Widget TextField",
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: WidgetsBasicos(),
    );
  }
}
class WidgetsBasicos extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Widget TextField"),
      ),
      body: Container(
        color: Colors.white,
        child: widgetTextField(),
      ),
    );
  }
  widgetTextField() {
    return TextField();
  }
}

O TextField chama o callback onChanged sempre que o usuário altera o texto no campo. Se o usuário indicar que está pronto para digitar no campo (por exemplo, pressionando um botão no teclado virtual), será chamado o callback onSubmitted.

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.

Você pode adicionar um rótulo, ícone, texto de dica embutido e texto de erro, fornecendo um InputDecoration como a propriedade de decoração do TextField. 

widgetTextField() {
    return TextField(
      decoration:
          InputDecoration(border: InputBorder.none,
          icon: Icon(Icons.person),
          hintText: 'Informe o nome'),
    );
  }

Para remover completamente a decoração (incluindo o sublinhado e o espaço reservado para o rótulo), defina a decoração como nula.

widgetTextField() {
    return TextField(
      decoration: null
    );
  }

Quando um campo de texto é selecionado e aceita entrada, dizemos que ele tem o 'foco'.

Geralmente, os usuários mudam o foco para um campo de texto tocando na tela/teclado e os desenvolvedores mudam o foco para um campo de texto programaticamente usando as ferramentas que iremos mostrar a seguir.

O gerenciamento de foco é uma ferramenta fundamental para criar formulários com um fluxo intuitivo. Por exemplo, digamos que você tenha uma tela de pesquisa com um campo de texto. Quando o usuário navega para a tela de pesquisa, você pode definir o foco para o campo de texto para o termo de pesquisa. Isso permite que o usuário comece a digitar assim que a tela estiver visível, sem precisar tocar manualmente no campo de texto.

Para dar foco a um campo de texto assim que ele estiver visível, usamos a propriedade autofocus.

widgetTextField() {
    return TextField(
      autofocus: true,
      decoration:
          InputDecoration(border: 
          InputBorder.none,
          icon: Icon(Icons.person),
          hintText: 'Informe o nome'),
    );
  }

Colocando o foco no campo de texto ao tocar em um botão
Em vez de mudar imediatamente o foco para um campo de texto específico, talvez seja necessário dar foco a um campo de texto em um momento posterior.

No mundo real, você também pode precisar dar foco a um campo de texto específico em resposta a uma chamada da API ou a um erro de validação.

No exemplo a seguir vamos dar o foco ao campo de texto depois que o usuário pressionar um botão usando as seguintes etapas:

1 - Criar um FocusNode.
2 - Passar o FocusNode para um TextField.
3 - Dar o foco ao TextField quando um botão for tocado

Mas o que esse tal de FocusNode ?

A classe FocusNode é um nó na árvore de foco que pode receber foco. A árvore de foco rastreia qual widget é o foco atual do usuário. O widget focado geralmente ouve eventos de teclado.

Agora vejamos o que fazer em cada etapa.

1 - Criar FocusNode

Vamos começar criando um FocusNode. Usamos o FocusNode para identificar um TextField específico na "árvore de foco" do Flutter. Isso permite que você dê foco ao TextField nas próximas etapas.

Como os nós de foco são objetos de vida longa, vamos gerenciar o ciclo de vida usando um objeto State.

Para isso teremos que criar um StatefulWidget chamado WidgetsBasicos:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Widget TextField",
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: WidgetsBasicos(),
    );
  }
}

No Visual Studio Code basta digitar stf  e a seguir selecione a opção : Flutter stateful widget

Isso vai gerar o trecho de código padrão para um StatefullWidget.

A seguir basta digitar o nome do widget : WidgetsBasicos.

class WidgetsBasicos extends StatefulWidget {
  @override
  _WidgetsBasicosState createState() => _WidgetsBasicosState();
}
class _WidgetsBasicosState extends State<WidgetsBasicos> {
  // Define o focus node. Para gerenciar o ciclo de vida, cria
  // o FocusNode no método initState, e o limpa no método dispose
  FocusNode myFocusNode;
  @override
  void initState() {
    super.initState();
    myFocusNode = FocusNode();
  }
  @override
  void dispose() {
    // limpa o no focus quando o form for liberado.
    myFocusNode.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
     return Scaffold(
      appBar: AppBar(
        title: Text('Foco no TextField'),
      ),
      body: widgetTextField(),
      floatingActionButton: FloatingActionButton(
        // Quando o botão for pressionado,
        // o foco vai para o campo texto usando myFocusNode.
        onPressed: () => FocusScope.of(context).requestFocus(myFocusNode),
        tooltip: 'Foco no Segundo campo texto',
        child: Icon(Icons.edit),
      ), 
    );
  }

No código acima , após criar o StatefulWidget criamos o método initState e definimos uma ocorrência de FocusNode dentro do método initState() da classe de estado e a seguir definimos o método dispose() onde limpamos o FocusNode.

No callback onPressed do botão floatingActionButton definimos o código que coloca o foco no TextField quando for pressionado.

A seguir no Scaffold, na propriedade body definimos o método widgetTextField onde vamos criar dois campos TextFields.

 Padding widgetTextField() {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          // o primeiro campo texto tem o foco no inicio
          TextField(
            autofocus: true,
            decoration:
            InputDecoration(border: 
            InputBorder.none,
            icon: Icon(Icons.person),
            hintText: 'Informe o nome'),
          ),
          // o segundo campo texto tem o foco quando o usuário 
          // clica no botão FloatingActionButton.
          TextField(
            focusNode: myFocusNode,
             decoration:
             InputDecoration(border: 
             InputBorder.none,
             icon: Icon(Icons.mail),
             hintText: 'Informe o email'),
          ),
        ],
      ),
    );
  }

Temos um widget Column envolvido por um widget Padding e contendo dois widgets TextField onde no primeiro definimos o autofocus igual a true e no segundo definimos o foco - myFocusNode - quando o usuário clica no botão.

Na próxima parte do artigo vamos continuar tratando do TextField.

Pegue o arquivo main.dart aqui: main_dart_FocoTextField.zip

"Meus filhinhos, estas coisas vos escrevo, para que não pequeis; e, se alguém pecar, temos um Advogado para com o Pai, Jesus Cristo, o justo."
1 João 2:1

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