Um guia completo sobre Text Field no Flutter

Introdução:

Flutter é um framework de código aberto para o desenvolvimento de diversas aplicações móveis, web e desktop. Um elemento crucial no desenvolvimento de aplicativos móveis é a entrada do usuário, facilitada por meio de campos de entrada de texto. Entre os widgets fundamentais do Flutter para esse propósito está o Text Field.

1. O que é Text Field? O Text Field é um widget no Flutter que permite aos usuários inserir texto e enviá-lo para o aplicativo. Este widget utiliza um ambiente de entrada de texto, permitindo que os usuários digitem informações e as transmitam para a aplicação.

2. Usando o Text Field: Para utilizar o Text Field em um aplicativo Flutter, você precisa usar a classe TextField. Você pode personalizar várias propriedades, como comprimento máximo, estilo, cor e muito mais.

TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    hintText: 'Please enter your username',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
  ),
  maxLength: 20,
  onChanged: (text) {
    print('Entered value: $text');
  },
)

3. Propriedades do Text Field:

• decoration: Especifica os detalhes da aparência do widget, como texto de dica (hint text), ícone de prefixo, ícone de sufixo e bordas.
• maxLength: Define o número máximo de caracteres que o usuário pode inserir.
• onChanged: Uma função chamada sempre que o valor do Text Field muda.

4. Validação e Entradas Especiais: Utilize recursos de validação como validator e inputFormatters para restringir e formatar as entradas do Text Field.

5. Usando Foco (Focus): O recurso de Focus permite focar programaticamente no Text Field, aprimorando a interação do usuário.

O TextField no framework Flutter vem com vários recursos que permitem controlar com precisão sua aparência e funcionalidade. Abaixo, os principais recursos do TextField são explicados em detalhes:

1. Decoration (Decoração): A propriedade decoration é fundamental e utiliza a classe InputDecoration. Esta propriedade define informações como texto de dica (hint text), ícone de prefixo, ícone de sufixo, borda, cor e muito mais para o TextField.

TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    hintText: 'Please enter your username',
    prefixIcon: Icon(Icons.person),
    suffixIcon: Icon(Icons.check_circle),
    border: OutlineInputBorder(),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blue),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.green),
    ),
  ),
)

2. TextEditingController: Você pode usar o TextEditingController para controlar o conteúdo do TextField. Esta ferramenta fornece acesso ao conteúdo do campo de texto, permitindo operações como leitura, escrita e a limpeza do conteúdo.

TextEditingController _controller = TextEditingController();

TextField(
  controller: _controller,
)

3. maxLength e maxLines: maxLength determina o número máximo de caracteres que um usuário pode inserir, e maxLines especifica o número máximo de linhas que o texto pode ter.

TextField(
  maxLength: 10,
  maxLines: 3,
)

4. onChanged e onSubmitted: onChanged é uma função chamada sempre que o valor do TextField muda. Além disso, onSubmitted é acionado quando o usuário pressiona a tecla “Enter”.

TextField(
  onChanged: (text) {
    print('Value changed: $text');
  },
  onSubmitted: (text) {
    print('Value submitted: $text');
  },
)

5. InputFormatters: inputFormatters oferece a capacidade de formatar a entrada do TextField de uma maneira específica. Por exemplo, você pode usar o LengthLimitingTextInputFormatter para limitar o número de caracteres.

TextField(
  inputFormatters: [
    LengthLimitingTextInputFormatter(5),
  ],

6. Style (Estilo): Você pode definir o estilo do texto, a cor, o tamanho e muito mais usando a propriedade style.

TextField(
  style: TextStyle(
    color: Colors.red,
    fontSize: 18.0,
  ),
)

7. FocusNode: O uso do FocusNode permite que você foque programaticamente no campo de texto, aprimorando a interação do usuário.

FocusNode _focusNode = FocusNode();

TextField(
  focusNode: _focusNode,
)

8. Validação: Você pode usar a propriedade validator para a validação de entrada no TextField.

TextField(
  validator: (value) {
    if (value.isEmpty) {
      return 'This field cannot be empty';
    }
    return null;
  },
)

Ao utilizar esses recursos, você conseguirá usar o TextField de maneira precisa e personalizada em suas aplicações Flutter.