Añadir una llamada POST en Flutter (dart)

Tiempo de lectura: 2 minutos

Hola, hoy vamos a aprender cómo podemos realizar una llamada POST con Flutter usando Dart.

Con esta llamada podremos realizar llamadas remotas a nuestros recursos del servidor Back usando un api REST.

Utilizaremos el paquete http para realizar la llamada de red.

Paso 1: Agregar dependencias

En el archivo pubspec.yaml, asegúrate de tener la siguiente dependencia:

dependencies:
  http: ^0.13.4

Luego, ejecuta flutter pub get para descargar la dependencia.

Paso 2: Importar el paquete http

En el archivo donde deseas realizar la llamada a la API, importa el paquete http (en mi caso he creado una ruta util/network/ y he creado un archivo llamado user.dart, dónde añadiré todas las llamadas que tienen que ver con los usuarios, login, registro etc…):

import 'package:http/http.dart' as http;

Paso 3: Crear la función de llamada a la API

Crea una función que realizará la llamada a la API. En este ejemplo, utilizaremos el método POST para enviar datos al servidor:

Future<void> postData() async {
  final url = 'https://api.example.com/endpoint'; // Reemplaza con la URL correcta de tu API

  final body = {
    'key1': 'value1',
    'key2': 'value2',
  };

  final headers = {
    'Content-Type': 'application/json',
  };

  final jsonBody = jsonEncode(body);

  final response = await http.post(Uri.parse(url), headers: headers, body: jsonBody);

  if (response.statusCode == 200) {
    // Lógica cuando la respuesta es exitosa
    print('Respuesta exitosa: ${response.body}');
  } else {
    // Lógica cuando hay un error en la solicitud
    print('Error en la solicitud: ${response.statusCode}');
  }
}

Asegúrate de reemplazar la URL con la dirección correcta de tu API. Además, personaliza el cuerpo de la solicitud según tus necesidades.

Queda así:

import 'package:http/http.dart' as http;

//Clase para realizar las peticiones de usuario
class UserUtil {

Future<void> postData(data1, data2) async {
  final url = 'https://api.example.com/endpoint'; // Reemplaza con la URL correcta de tu API

  final body = {
    'key1': 'value1',
    'key2': 'value2',
  };

  final headers = {
    'Content-Type': 'application/json',
  };

  final jsonBody = jsonEncode(body);

  final response = await http.post(Uri.parse(url), headers: headers, body: jsonBody);
  return response;
}

}

Paso 4: Llamar a la función desde tu pantalla (screen)

En tu pantalla donde deseas realizar la llamada a la API, puedes invocar la función postData() en respuesta a un evento, como presionar un botón:

import 'package:flutter/material.dart';
import 'package:<nombre_nuestro_package_proyecto>/util/network/user.dart';

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ejemplo de llamada API'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
             final response = await UserUtil.postData("value_1", "value_2");
             if (response.statusCode == 200) {
              // Lógica cuando la respuesta es exitosa
              print('Respuesta exitosa: ${response.body}');
             } else {
              // Lógica cuando hay un error en la solicitud
              print('Error en la solicitud: ${response.statusCode}');
             }
          },
          child: Text('Realizar llamada a la API'),
        ),
      ),
    );
  }
}

Hemos importado import ‘package:/util/network/user.dart’;

Y luego llamamos a la función dentro de la clase UserUtil: await UserUtil.postData(«value_1», «value_2»);

Y nos llega la respuesta dentro de la variable response.

¡Y eso es todo! Ahora tienes un ejemplo básico de cómo realizar una llamada a una API REST utilizando el método POST en Flutter utilizando el paquete http. Puedes personalizar y ampliar este código según tus necesidades específicas. Recuerda manejar los errores y las respuestas de manera adecuada para una mejor experiencia de usuario.