Um guia completo sobre campos de texto no Flutter

Introdução:

O Flutter é um framework de código aberto para o desenvolvimento de diversas aplicações mobile, web e desktop. Um elemento crucial no desenvolvimento de aplicativos móveis é a entrada de dados do usuário, facilitada por campos de entrada de texto. Entre os widgets fundamentais do Flutter para essa finalidade está o TextField.

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

2. Usando o TextField: Para empregar o TextField em uma aplicação Flutter, você precisa utilizar a classe TextField. É possível personalizar diversas propriedades, como o comprimento máximo (limite de caracteres), 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 TextField:

• decoration: Especifica os detalhes de 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 campo de texto muda.

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

5. Uso de Foco: O recurso de Foco permite focar programaticamente no TextField, aprimorando a interação do usuário.

O TextField no framework Flutter vem com vários recursos que permitem controlar precisamente 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 o 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 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.