Como crear fomularios en Flutter

No cabe duda de que los formularios son un componente muy utilizado en el desarrollo, ya sea móvil o no. En todo proceso donde el usuario deba de insertar datos, es necesario dotar de un “input” de entrada a nuestra aplicación.

Flutter posee widgets muy interesantes para este tipo de trabajos, con el TextFormField junto con el widget Form, poseemos unas herramientas muy potentes y a la vez muy sencillas de usar para crear formularios en Flutter.

Creando un formulario en Flutter

Como ejemplo de como crear formularios en Flutter vamos a desarrollar una vista como si fuese una pantalla de login de una aplicación. Tendremos dos TextFormField, uno donde incluir un email y otro donde añadir la contraseña. Por último un botón que tras pulsarlo, validará y comprobará que los datos introducidos sean los correctos, según las normas de validación que establezcamos, y nos pasará a la siguiente pantalla, solo mostraremos un toast si la validación es correcta.

Como requisitos de validación solo vamos a tener dos, que el campo email sea una dirección de email válida, o sea, que esté formada correctamente. Y como segunda condición que el campo password no esté vacío y que tenga un mínimo de 8 caracteres.

Empecemos construyendo la vista y explicando los diferentes widgets de Flutter que la conforman.

class LoginScreenState extends State {
  // Crea una clave global que identificará de manera única el widget Form
  // y nos permita validar el formulario
  //
  // Nota: Esto es un GlobalKey, no un GlobalKey!
  final _formKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    // Crea un widget Form usando el _formKey que creamos anteriormente
    return Form(  //1 Form como raiz de nuestro formulario
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _emailInput(), //2
          _passwordInput(), //2
          Padding(
              padding: const EdgeInsets.symmetric(vertical: 16.0),
              child: _loginButton()),//2
        ],
      ),
    );
  }
......

1// Como widget raíz de nuestro formulario hemos incluido un widget Form. Este widget posee una serie de métodos internos que nos facilitan mucho la labor de gestionar los diferentes campos que conforman el formulario, incluido la validación.

Al parámetro key lo hemos asignado un GlobalKey<FormState> para después en el evento del botón Login poder recoger si las validaciones que hemos requerido a los dos campos son correctas o no.

2// Disponemos los inputs dentro de una columna, un primer TextFormField para el email , otro para la password y por último el botón de login.

Validando los TextFormField en Flutter

Hemos extraído los inputs a métodos diferentes para abstraer algo más la lógica de cada uno. En el input del email vemos que los propios TextFormField poseen un parámetro validator al que tenemos que asignar una función que recibe un valor tipo String, el campo que se ha introducido por el input, y devuelve un String, el mensaje de error en caso de que la validación no sea correcta.

 Widget _emailInput() {
    return TextFormField(
        decoration: const InputDecoration(
          icon: Icon(Icons.email),
          hintText: 'Inserte su email',
          labelText: 'Email',
        ),
        validator: (value) => _validatorEmail(value));
  }

  Widget _passwordInput() {
    return TextFormField(
        decoration: const InputDecoration(
          icon: Icon(Icons.lock),
          hintText: 'Inserte su contraseña',
          labelText: 'Contraseña',
        ),
        validator: (value) => _validatorPassword(value));
  }

En nuestro caso la validación del email la hemos realizado fuera también de este método para abstraerse más si cabe, y poder reutilizarla en otras vistas si hiciese falta. Habría que crear una clase y tener las validaciones en ella.

En nuestra validación lo que tenemos realizado es que si el campo no pasa el pattern de la regex del email, devuelve el String que se mostrará como error el pulsar el botón de Login.

String _validatorEmail(String value) {
    if (!_isEmail(value)) {
      return 'Please enter some text';
    }
  }
bool _isEmail(String str) {
    return _emailRegExp.hasMatch(str.toLowerCase());
  }

  static final RegExp _emailRegExp = RegExp(
      r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9\-\_]+(\.[a-zA-Z]+)*$");

 

Para el caso del input de la contraseña, es básicamente igual, solo que la validación comprueba que no esté vació el campo y que este sea como mínimo de una longitud de 8 caracteres.

String _validatorPassword(String value) {
    if (!_hasMinLenght(value)) {
      return 'Please enter some text';
    }
  }
  bool _hasMinLenght(String value){
    return value.isNotEmpty && value.length >= 8;
  }

Validación del Formulario

Ya solo queda darle un vistazo a la lógica que hay dentro del método que se ejecuta al pulsar el botón Login. 

Aquí utilizamos la GlobalKey que habíamos seteado al widget Form. Esta key nos provee de acceso a la validación que internamente ha realizado el widget Form utilizando el conjunto de validators que nosotros hemos realizado en cada FormTextField.

 Widget _loginButton() {
    return ElevatedButton(
      onPressed: () {
        // devolverá true si el formulario es válido, o falso si
        // el formulario no es válido.
        if (_formKey.currentState.validate()) {
          // Si el formulario es válido, queremos mostrar un Snackbar
          Scaffold.of(context)
              .showSnackBar(SnackBar(content: Text('Login correcto')));
        }
      },
      child: Text('Login'),
    );
  }

Preguntando el método currentState.validate() obtenemos un booleano a true si todos los TextFormField han pasado nuestra validación o un false en caso contrario.

Al mismo tiempo, si existe un error, el widget Form mostrará el error bajo cada TextFormField con el texto que nosotros hemos incluido en el validador.

Lo cierto es que sumamente fácil crear formularios y validarlos con el conjunto de estos dos widgets.

Todo el código lo tenéis disponible Github.