✅ Comprobar antes de gardar

Validar significa comprobar que un dato é correcto antes de utilizalo.

Por exemplo, se pedimos o nome dun alumno, debemos comprobar que escribiu algo. Non queremos aceptar un campo baleiro nin un nome formado unicamente por espazos.

En Flutter podemos facer esta comprobación de dúas maneiras:

• Cun TextField: comprobamos nós mesmos o texto cando o usuario preme o botón «Gardar».
• Cun formulario (Form): utilizamos campos TextFormField que permiten definir as súas propias regras de validación.

Imos ver as dúas posibilidades.

✍️ Validar un TextField directamente

Un TextField non comproba automaticamente se o texto introducido é correcto. Para facelo, podemos utilizar un if no método que se executa ao premer o botón «Gardar».

O proceso será o seguinte:

1. Lemos o texto utilizando _controlador.text.
2. Eliminamos os espazos dos extremos con trim().
3. Se o texto está baleiro, mostramos unha mensaxe de erro e non continuamos.
4. Se é correcto, retiramos o erro anterior e mostramos o nome gardado.

⚠️ Como mostramos o erro?

Podemos utilizar a propiedade errorText de InputDecoration para mostrar unha mensaxe de erro debaixo do campo.

Esta propiedade pode recibir un texto ou null:

• Se recibe un texto, mostra esa mensaxe baixo o campo.
• Se recibe null, non mostra ningún erro.

Para controlar esta mensaxe utilizaremos unha variable:

String? _erro;

O símbolo ? indica que a variable pode conter un texto (String) ou null. Inicialmente vale null, porque aínda non se produciu ningún erro.

Cando detectemos un erro, gardaremos a mensaxe nesta variable e utilizaremos setState() para actualizar a pantalla.

🧪 Exemplo con comprobación manual

🔗 DartPad:

• https://dartpad.dev/?id=0c08a69b22b041554e404ca62a3eceb3.

🔍 Que sucede ao premer «Gardar»?

O método _gardar() comeza lendo o texto e eliminando os espazos dos extremos:

final nome = _controlador.text.trim();

A continuación, comprobamos se quedou baleiro:

if (nome.isEmpty) {
  setState(() {
    _erro = 'Escribe o nome';
    _mensaxe = '';
  });
  return;
}

Se o nome está baleiro, mostramos o erro e limpamos a mensaxe anterior.

A instrución return fai que o método remate inmediatamente. Polo tanto, non se executa o código que aparece despois e non gardamos un dato incorrecto.

Se o nome non está baleiro, continuamos:

setState(() {
  _erro = null;
  _mensaxe = 'Nome gardado: $nome';
});

Neste caso, retiramos calquera erro anterior e mostramos o nome introducido.

💡 O erro só se comproba ao premer «Gardar». Se corriximos o texto, debemos volver premer o botón para que desapareza o aviso. Lembra que errorText só mostra a mensaxe: non valida o texto por si mesmo.

Tamén poderiamos mostrar o erro mediante unha SnackBar, como vimos no Tema 3.4. Neste exemplo utilizamos errorText porque permite identificar facilmente o campo que debemos corrixir.

📝 Validar cun formulario

Cando unha pantalla ten varios campos, comprobar cada un manualmente pode resultar pouco práctico.

Para facilitar este traballo, Flutter proporciona dous widgets:

• Form: agrupa os campos dun formulario e permite comprobar todos os seus datos.
• TextFormField: é semellante a TextField, pero incorpora unha propiedade chamada validator para comprobar o texto introducido.

Por exemplo, nun formulario de rexistro poderiamos ter un campo para o nome, outro para o correo electrónico e outro para o contrasinal. Cada campo tería as súas propias regras de validación.

Ao premer «Gardar», poderiamos comprobar todos os campos dunha soa vez.

Comezaremos cun exemplo sinxelo que só ten un campo.

🗝️ Como conectamos o botón co formulario?

Para comprobar os datos dun formulario cando prememos un botón, necesitamos poder acceder a ese formulario desde o código.

Para iso utilizamos unha chave (GlobalKey).

Primeiro creamos a chave como atributo da clase State:

final _chave = GlobalKey<FormState>();

Despois asignámoslla ao formulario mediante a propiedade key:

Form(
  key: _chave,
  child: Column(
    // Campos do formulario.
  ),
)

Deste xeito, podemos utilizar a chave para pedir ao formulario que comprobe os seus campos:

_chave.currentState!.validate()

O método validate() executa as comprobacións dos campos do formulario e devolve:

• true: se todos os campos son correctos.
• false: se algún campo contén un erro.

💡 Polo momento, non necesitamos comprender todos os detalles de GlobalKey, FormState ou do operador !. Abonda con saber que esta instrución nos permite comprobar os campos do formulario.

🔎 Como definimos as regras de validación?

Cada TextFormField pode ter unha función validator, encargada de comprobar se o texto introducido é correcto.

Por exemplo:

validator: (valor) {
  if (valor == null || valor.trim().isEmpty) {
    return 'Escribe o nome';
  }
  return null;
},

Cando executamos validate(), Flutter chama automaticamente á función validator de cada campo.

Esta función recibe o texto do campo na variable valor e comproba dúas condicións:

• valor == null: comproba se non hai ningún valor.
• valor.trim().isEmpty: comproba se o texto está baleiro ou só contén espazos.

O operador || significa OU. Polo tanto, abonda con que se cumpra unha das dúas condicións para considerar que o dato non é válido.

A función validator debe devolver:

• Unha mensaxe de erro se o dato non é correcto. Flutter mostraraa automaticamente debaixo do campo.
• null se o dato é correcto e non existe ningún erro.

💡 Non confundas validator con validate(): a función validator devolve unha mensaxe ou null para un campo, mentres que validate() devolve true ou false para indicar se todos os campos do formulario son válidos.

🧪 Exemplo con Form e TextFormField

Neste caso, utilizaremos un formulario para comprobar que o usuario introduce un nome.

🔗 DartPad:

• https://dartpad.dev/?id=c4ae1e720901fd67864c1323c45d455b.

🔍 Que sucede ao premer «Gardar»?

Cando prememos o botón, executamos o método _gardar():

void _gardar() {
  if (_chave.currentState!.validate()) {
    setState(() {
      _mensaxe = 'Nome gardado: ${_controlador.text.trim()}';
    });
  } else {
    setState(() {
      _mensaxe = ''; // Retiramos a confirmación anterior se agora hai un erro.
    });
  }
}

O funcionamento é o seguinte:

1. Executamos validate() para comprobar os campos do formulario.
2. Flutter executa a función validator do campo do nome.
3. Se o nome está baleiro, aparece a mensaxe de erro baixo o campo e validate() devolve false. O bloque else limpa a mensaxe de gardado anterior.
4. Se o nome é correcto, validate() devolve true e entramos no if para mostrar o nome gardado.

A principal vantaxe é que non necesitamos crear unha variable _erro nin utilizar errorText. O propio TextFormField encárgase de mostrar a mensaxe devolta polo seu validator.

Ademais, cando volvemos validar o formulario cun nome correcto, o erro anterior desaparece.

⚖️ Cal escollemos?

As dúas opcións permiten comprobar os datos antes de utilizalos. A diferenza está na maneira de organizar as comprobacións e mostrar os erros.

Para unha comprobación pequena, TextField cun if pode ser suficiente. Cando temos varios campos con diferentes regras, Form facilita a organización das validacións.

💡 En ambos os casos, o importante é comprobar que os datos son correctos antes de utilizalos. Nos seguintes exemplos empregaremos principalmente Form e TextFormField.

🧪 Comproba o funcionamento

Executa os dous programas e realiza estas probas:

1. Preme «Gardar» sen escribir nada. Debe aparecer unha mensaxe de erro.
2. Escribe varios espazos e volve premer «Gardar». O erro debe continuar aparecendo.
3. Escribe «Iria» e preme «Gardar». O erro debe desaparecer e debe mostrarse o nome gardado.

Lembra que nestes exemplos «gardar» só significa mostrar o dato na pantalla. Non estamos almacenando información nun ficheiro nin nun servidor, polo que o nome non se conserva ao reiniciar a aplicación.

No Tema 3.7 veremos un exemplo con varios campos, validación de números e comprobacións mentres o usuario escribe.

📚 Consulta:

• TextField → https://api.flutter.dev/flutter/material/TextField-class.html.
• Validación de formularios en Flutter → https://docs.flutter.dev/cookbook/forms/validation.