Validaciones de Campos de Texto en Flutter

Carlos Millan
31 mayo, 2019

. . .

Hola amigos, este artículo trata sobre validaciones que podemos hacer en campos de formulario en Flutter, el cual está escrito por
Temidayo Adefioye el cual puedes encontrar el artículo original aquí.

Crear una aplicación con una experiencia fantástica suele ser una prioridad para la mayoría de los desarrolladores móviles. Una de las varias formas de crear una hermosa experiencia de usuario es la validación. Su usuario debería poder resolver las cosas sin tener que pasar necesariamente por un manual de la aplicación si hay algo como eso :).

En Flutter, la validación de campo es tan simple como «hola mundo». No necesita un paquete de terceros para hacer esto, porque Flutter quita el trabajo tedioso de su cuello.

En este artículo, veremos cómo puede validar los campos de formulario regulares de la siguiente manera:

  • Nombre
  • Email
  • Password

Validación de Nombre

Paso 1:

En Flutter, podemos validar un campo de entrada pasando una función de validación personalizada a la propiedad validator de TextFormField. Así que vamos a crear un widget con un TextFormField.

// Construir un widget personalizado
Widget formUI() {
  return new Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      new TextFormField(
        decoration: const InputDecoration(labelText: 'Name'), // Crea un decoration opcional para su TextFormField
        validator: _validateName, //Crearemos esta función en el paso 2
      ),
      ....
    ],
  );
}

Paso 2:

Cree una función llamada _validateName para completar el fragmento de código en el paso 1.

_validateName(String value){
  if(value.isEmpty){
    return 'Nombre no puede estar vacío';
  }

Validación de Email

Paso 1:

Agregue un nuevo TextFormField al formUI que creamos en el paso 1 de la validación del nombre.

new TextFormField(
  decoration: const InputDecoration(labelText: 'Email'),
  validator: _validateEmail,
  keyboardType: TextInputType.emailAddress,
)

Paso 2:

Cree una función llamada _validateEmail para completar el fragmento de código en el paso 1.

_validateEmail(String value) {
  if (value.isEmpty) {
    return 'El campo Email no puede estar vacío!';
  }
  // Regex para validación de email
  String p = "[a-zA-Z0-9\+\.\_\%\-\+]{1,256}" +
      "\\@" +
      "[a-zA-Z0-9][a-zA-Z0-9\\-]{0,64}" +
      "(" +
      "\\." +
      "[a-zA-Z0-9][a-zA-Z0-9\\-]{0,25}" +
      ")+";
  RegExp regExp = new RegExp(p);
  if (regExp.hasMatch(value)) {
    return null;
  }
  return 'El Email suministrado no es válido. Intente otro correo electrónico';
}

Validación de Password

Paso 1:

Agregue un nuevo TextFormField al formUI que creamos en el paso 1 de la validación de correo electrónico.

new TextFormField(
  keyboardType: TextInputType.text,
  validator: _validatePassword,
  decoration: const InputDecoration(
    labelText: 'Password',
    hintText: 'Ingrese su contraseña',
  ),
), 

Paso 2:

Cree una función llamada _validatePassword para completar el fragmento de código en el paso 1.

_validatePassword(String value){
  if(value.isEmpty){
    return 'El campo Contraseña no puede estar vacío';
  }
  // Use cualquier tamaño de contraseña que usted quiera aquí
  if(value.length<6){
    return 'El tamaño de la contraseña debe ser más de 6 carácteres';
  }
}

Y listo, eso es todo. Así es como se valida campos de texto en Flutter.

Hasta la próxima!!!

42

1 comentario

  • Edir

    Cuento con un ComboBox el cual contiene campos que deberían ser validados individualmente, es posible realizar tal operación?
    Cual sería la posible solución?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comunidades en Español