Formatadores de texto personalizados para Flutter Forms

As entradas de formulário são uma parte crucial dos aplicativos móveis e da Web, facilitando a interação do usuário e a coleta de dados. No Flutter, o widget TextField serve como a principal ferramenta para criar campos de entrada de texto. No entanto, há casos em que os desenvolvedores precisam de mais controle sobre o formato, a validação e o comportamento da entrada. É aqui que os formatadores de texto personalizados entram em ação.

Introdução 🌅

Os formatadores de texto personalizados no Flutter são classes que estendem a classe TextInputFormatter. Elas permitem que os desenvolvedores definam a lógica personalizada para formatar e validar a entrada do usuário nos campos de texto. Esses formatadores interceptam as alterações feitas na entrada de texto e aplicam as regras especificadas antes de atualizar o valor do campo.

Necessidade de formatadores personalizados 🤔

A necessidade de formatadores de texto personalizados decorre de vários cenários:

1. Formatação de entrada: Os formatadores personalizados permitem que os desenvolvedores apliquem regras de formatação específicas para entradas de texto, como restrição de caracteres ou aplicação de um padrão específico.

2. Validação de entrada: Fornecem um mecanismo para validar a entrada do usuário em tempo real, garantindo que somente dados válidos sejam aceitos.

3. Melhoria da experiência do usuário: Ao orientar os usuários e fornecer feedback imediato, os formatadores personalizados aprimoram a experiência do usuário e reduzem os erros durante a entrada de dados.

Formatadores incorporados

FilteringTextInputFormatter

//  Permitir apenas a entrada de dados numéricos
FilteringTextInputFormatter.digitsOnly

LengthLimitingTextInputFormatter

// Limitação do tamanho da entrada a 10 caracteres
LengthLimitingTextInputFormatter(10)

Formatador personalizado 🏹

Para criar um formatador de texto personalizado no Flutter, siga esta sintaxe:

import 'package:flutter/services.dart';

class CustomFormatter extends TextInputFormatter {
  // Construtor e propriedades, se houver

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    // Lógica personalizada para formatar e validar a entrada
  }
}

Métodos principais: formatEditUpdate ⚙️

No núcleo da classe TextInputFormatter está o método formatEditUpdate. Esse método é chamado quando os usuários digitam, cortam, copiam ou colam texto no widget EditableText. Os desenvolvedores podem substituir esse método para modificar o texto resultante com base no valor anterior (oldValue) e no novo valor recebido (newValue).

Dica: como lidar com caracteres complexos 💡

Ao lidar com a entrada do usuário, especialmente em aplicativos internacionalizados, o tratamento de caracteres complexos, como emojis, torna-se crucial. O uso da propriedade characters garante o tratamento correto de clusters de grafemas estendidos e pares substitutos.

// Maneira correta de encontrar o comprimento da entrada do usuário
int length = string.characters.length;

Exemplo 🔨

Vamos explorar alguns exemplos de formatadores de texto personalizados e seu uso:

import 'package:flutter/services.dart';

class InputFormatter extends TextInputFormatter {
  final String regex;

  const InputFormatter(this.regex);

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    if (newValue.text.isEmpty) return newValue;
    return RegExp(regex).hasMatch(newValue.text) ? newValue : oldValue;
  }
}

class CustomFormatters {
  static const amount = InputFormatter(r'^\d*\.?\d{0,3}$');

  static const name = InputFormatter(r'^(?!\s)[a-zA-Z0-9\s]+$');

  static const note = InputFormatter(r'^[^\s].*$');
}

Neste exemplo, InputFormatter é um formatador genérico que valida a entrada com base em uma expressão regular (regex). A classe CustomFormatters contém formatadores predefinidos para diferentes casos de uso, como formatação de valores, nomes e notas.

Expressões regulares (Regex)

As expressões regulares são ferramentas poderosas para definir padrões e restrições para entradas de texto. Em formatadores personalizados, a regex é frequentemente usada para especificar o formato ou os caracteres permitidos para validação de entrada. Por exemplo, a regex r’^\d*\.?\d{0,3}$’ no formatador de valores permite dígitos com até três casas decimais.

Melhores práticas 🚴🏽

Ao usar formatadores de texto personalizados no Flutter, considere as seguintes práticas recomendadas:

1. Mantenha a simplicidade: Projete formatadores com lógica clara e direta para evitar confusão e possíveis bugs.

2. Teste exaustivamente: Teste os formatadores com vários cenários de entrada para garantir que eles se comportem conforme o esperado e lidem com casos extremos de forma elegante.

3. Forneça feedback: Use os formatadores para fornecer feedback imediato aos usuários sobre a validade de suas entradas, melhorando a experiência do usuário.

4. Reutilize o código: Defina formatadores reutilizáveis para padrões de entrada ou validações comuns para promover a reutilização e a manutenção do código.

Conclusão 📰

Os formatadores de texto personalizados são ferramentas poderosas no Flutter para controlar e validar a entrada do usuário em campos de formulário. Ao definir a lógica personalizada e usar expressões regulares, os desenvolvedores podem aplicar regras de formatação específicas e melhorar a experiência do usuário. Quando usados de forma eficaz e seguindo as práticas recomendadas, os formatadores personalizados aprimoram a funcionalidade e a usabilidade dos aplicativos Flutter.