11.10. Trabajar con formularios en Flutter: integración con API externas

Los formularios son una parte esencial de casi todas las aplicaciones. Se utilizan para recopilar información del usuario, ya sea para crear una cuenta, iniciar sesión, realizar una reserva, etc. En Flutter, hay varias formas de crear formularios, pero en este artículo nos centraremos en un enfoque específico: la integración con API externas.

Antes de comenzar, es importante comprender qué es una API. API, o interfaz de programación de aplicaciones, es un conjunto de reglas y protocolos que permiten que diferentes programas de software se comuniquen entre sí. En otras palabras, una API permite que una aplicación acceda a recursos o funcionalidades de otra aplicación, servidor o servicio.

Cuando hablamos de integrar formularios con API externas, nos referimos al proceso de enviar los datos recopilados a través del formulario a un servidor o servicio externo utilizando su API. Esto se puede hacer de varias maneras, pero la más común es mediante solicitudes HTTP.

En Flutter, podemos usar la biblioteca http para realizar solicitudes HTTP. Para comenzar, debemos agregarlo a nuestro archivo pubspec.yaml:

dependencias:
  aleteo:
    SDK: aleteo
  http: ^0.13.3

Después de agregar la biblioteca, podemos importarla a nuestro archivo:

importar 'paquete:http/http.dart' como http;

Ahora podemos empezar a trabajar con nuestro formulario. Supongamos que tenemos un formulario de inicio de sesión simple con dos campos: correo electrónico y contraseña. En Flutter, podemos usar el widget TextFormField para crear estos campos:

Campo de formulario de texto (
  decoración: InputDecoration(labelText: 'Correo electrónico'),
  onSaved: (valor) {
    // guarda el valor del campo
  },
),
Campo de formulario de texto (
  decoración: InputDecoration(labelText: 'Contraseña'),
  texto oscuro: verdadero,
  onSaved: (valor) {
    // guarda el valor del campo
  },
),

Cuando el usuario presiona el botón enviar, queremos recopilar los valores de estos campos y enviarlos a la API. Para hacer esto, necesitamos envolver los campos de nuestro formulario en un widget de formulario y usar una GlobalKey para acceder al estado del formulario:

final _formKey = GlobalKey();

Forma(
  clave: _formKey,
  hijo: columna (
    niños: [
      // campos de formulario aquí
    ],
  ),
)

Ahora podemos usar el método _formKey.currentState.save() para guardar los valores de los campos y _formKey.currentState.validate() para validar los campos antes de enviar los datos.

onPressed:() {
  si (_formKey.currentState.validate()) {
    _formKey.currentState.save();
    //enviar los datos
  }
},

Para enviar los datos, podemos usar la función http.post(), que acepta la URL de la API y los datos del formulario como parámetros. Los datos del formulario deben convertirse a un mapa de cadenas antes de enviarlos:

http.post(
  'https://api.example.com/login',
  cuerpo: {'correo electrónico': correo electrónico, 'contraseña': contraseña},
)

Finalmente, la función http.post() devuelve un Futuro que se resuelve en una Respuesta. Podemos usar Respuesta para comprobar si la solicitud fue exitosa y obtener los datos de la respuesta:

http.post(
  'https://api.example.com/login',
  cuerpo: {'correo electrónico': correo electrónico, 'contraseña': contraseña},
).entonces((respuesta) {
  if (respuesta.statusCode == 200) {
    // solicitud exitosa
  } demás {
    // solicitud fallida
  }
});

En resumen, trabajar con formularios y API externas en Flutter implica recopilar datos del formulario, validarlos, enviarlos a la API mediante una solicitud HTTP y, finalmente, manejar la respuesta. Este es un proceso muy común en el desarrollo de aplicaciones y con la ayuda de Flutter y la biblioteca http podemos lograrlo de manera eficiente y efectiva.