🗒️Custom Text Form Field

O widget CustomTextFormField é um campo de entrada personalizado que pode ser facilmente personalizado para se adequar aos requisitos de design do aplicativo. Ele oferece várias opções de personalizaç

Construtor

const CustomTextFormField({
    Key? key,
    this.hintText = "",
    this.autovalidateMode = AutovalidateMode.onUserInteraction,
    this.onTap,
    this.maxLines = 1,
    this.readOnly = false,
    this.onChanged,
    this.onFieldSubmitted,
    this.isPassword = false,
    this.labelText,
    this.initialValue,
    this.validator,
    this.inputFormatterList,
    this.keyboardType = TextInputType.text,
    this.suffixIcon,
    this.enabled = true,
    this.errorText,
    this.backgroundColor,
    this.textEditingController,
    this.capitalization = TextCapitalization.none,
    this.textInputAction = TextInputAction.next,
    this.labelStyle,
    this.errorStyle,
    this.hintTextStyle,
    this.textStyle,
    this.iconColor,
    this.borderRadius,
    this.padding,
    this.inputBorder,
    this.focusColor,
    this.filled,
    this.errorBorder,
    this.focusedErrorBorder,
    this.prefixIcon,
    this.focusedBorder,
    this.borderColor,
    this.errorBorderColor,
    this.focusedBorderColor,
    this.focusedErrorBorderColor,
    this.inlineLabel = false,
    this.borderWidth = 2,
    this.labelAlignment,
  }) : super(key: key);

Propriedades

• hintText: O texto de dica exibido quando o campo de entrada está vazio.

• errorText: O texto de erro exibido abaixo do campo de entrada quando há um erro de validação.

• labelText: O texto de rótulo exibido acima do campo de entrada.

• initialValue: O valor inicial do campo de entrada.

• maxLines: O número máximo de linhas exibidas no campo de entrada.

• suffixIcon: Um ícone opcional que será exibido à direita do campo de entrada.

• prefixIcon: Um ícone opcional que será exibido à esquerda do campo de entrada.

• backgroundColor: A cor de fundo do campo de entrada.

• labelStyle: O estilo de texto para o rótulo.

• errorStyle: O estilo de texto para o texto de erro.

• hintTextStyle: O estilo de texto para o texto de dica.

• textStyle: O estilo de texto para o texto digitado.

• enabled: Um valor booleano que indica se o campo de entrada está habilitado para interação.

• readOnly: Um valor booleano que indica se o campo de entrada é somente leitura.

• isPassword: Um valor booleano que indica se o campo de entrada é um campo de senha.

• keyboardType: O tipo de teclado exibido ao abrir o campo de entrada.

• onChanged: Uma função de retorno de chamada que será acionada quando o texto do campo de entrada for alterado.

• onFieldSubmitted: Uma função de retorno de chamada que será acionada quando o usuário enviar o texto no campo de entrada.

• onTap: Uma função de retorno de chamada que será acionada quando o campo de entrada for tocado.

• validator: Uma função de validação personalizada que será chamada quando o texto do campo de entrada for alterado ou enviado.

• inputFormatterList: Uma lista de TextInputFormatter que pode ser usada para formatar o texto do campo de entrada.

• autovalidateMode: O modo de validação automática do campo de entrada.

• textEditingController: Um controlador de edição opcional para o campo de entrada.

• capitalization: A capitalização de texto do campo de entrada.

• textInputAction: A ação a ser executada quando o usuário pressionar o botão de ação do teclado.

• iconColor: A cor do ícone.

• borderRadius: O raio do arredondamento das bordas do campo de entrada.

• padding: Preenchimento interno do campo de entrada.

• inputBorder: A borda do campo de entrada.

• focusedBorder: A borda do campo de entrada quando está focado.

• errorBorder: A borda do campo de entrada quando há um erro de validação.

• focusedErrorBorder: A borda do campo de entrada quando há um erro de validação e está focado.

• focusColor: A cor de foco do campo de entrada.

• filled: Um valor booleano que indica se o campo de entrada deve ser preenchido.

• borderColor: A cor da borda do campo de entrada.

• errorBorderColor: A cor da borda do campo de entrada quando há um erro de validação.

• focusedBorderColor: A cor da borda do campo de entrada quando está focado.

• focusedErrorBorderColor: A cor da borda do campo de entrada quando há um erro de validação e está focado.

• inlineLabel: Um valor booleano que indica se o rótulo do campo de entrada deve ser exibido dentro do campo.

• borderWidth: A largura da borda do campo de entrada.

• labelAlignment: O alinhamento do rótulo do campo de entrada.

Exemplos de Uso

Aqui estão alguns exemplos de como usar o CustomTextFormField em seu aplicativo:

CustomTextFormField(
  hintText: "Digite seu nome",
  labelText: "Nome",
  onChanged: (value) {
    // Ação a ser executada quando o texto for alterado
  },
  validator: (value) {
    if (value.isEmpty) {
      return "Este campo é obrigatório";
    }
    return null;
  },
)

CustomTextFormField(
  hintText: "Digite sua senha",
  labelText: "Senha",
  isPassword: true,
  suffixIcon: Icon(Icons.lock),
)

CustomTextFormField(
  hintText: "Digite seu e-mail",
  labelText: "E-mail",
  keyboardType: TextInputType.emailAddress,
)

Notas

• O CustomTextFormField pode ser personalizado para atender às necessidades específicas do design do aplicativo.

• A propriedade isPassword controla se o campo de entrada é tratado como um campo de senha e permite alternar a visibilidade da senha.

• O CustomTextFormField permite a adição de ícones de prefixo e sufixo para maior flexibilidade no design do campo de entrada.

• A propriedade inlineLabel controla se o rótulo do campo de entrada deve ser exibido dentro do campo.

Capturas de tela