En cualquier aplicación hoy en día, es necesario poder comunicarse con Internet para poder obtener datos, en Flutter no es la excepción, ya sea que quieras crear aplicaciones web o móviles con el mismo, debes de conocer como realizar este tipo de conexiones o integraciones, en este tutorial, abordaremos este tema.
En este artículo, creará una aplicación Flutter de ejemplo que usa el paquete http para realizar solicitudes HTTP.
HTTP (Protocolo de transferencia de hipertexto) se utiliza para la comunicación efectiva entre el "Cliente" y el "Servidor" y el mensaje que envía un cliente a un servidor se conoce como "solicitud HTTP" y que si has tomado mis cursos, ya tu debes de conocer ya que siempre hacemos conexiones de tipo HTTP para intercomunicar sistemas y en Flutter no es la excepción.
Flutter admite funciones como la solicitud HTTP de todo tipo para interconectar sistemas webs creadas en Laravel, CodeIgniter... Django, Flash... o cualquier cosa que emplee peticiones HTTP con Flutter lo cual es punto.
Paso 1: Lo primero es agregar el paquete http al archivo pubspec.yaml y ejecutar pub get:
https://pub.dev/packages/http
Este paquete nos permite realizar peticiones HTTP fácilmente a cualquier otra aplicación, inclusive la que nosotros realizamos.
paso 2: importar el paquete http:
import 'package:http/http.dart' as http;Le colocamos el alias de as http para que podamos referenciar todos los métodos que nos ofrece este paquete mediante http.
paso 3: Crea una función para enviar una petición de tipo get:
Aquí puedes ver un código que se auto explica solo bastante bien: lo primero que necesitamos es definir el String de conexión mediante una Uri, la cual pasamos de un String a una uri.
El siguiente es realizar la petición, que puede ser de cualquier tipo, y en este caso es una petición de tipo post a la ruta anterior y pasamos unos parámetros de manera de ejemplo: como puedes suponer, al ser una petición a internet, esto demora algo de tiempo que NO sabemos determinar y por eso colocamos un await.
Finalmente tenemos la respuesta y podemos preguntar por distintos datos como el status, headers y por supuesto el body que nos trae los datos de respuesta.
var url = Uri.parse('tu-sitio');
var response = await http.post(url, body: {'name': 'doodle', 'color': 'blue'});
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');
print(await http.read('https://example.com/foobar.txt'));Explicación de la función anterior
- http.response (utilizado para solicitar los datos de la URL y almacenar la respuesta)
- Ahora guarde la respuesta en la variable de respuesta response = await http.get (Uri.parse (“tu-sitio"));
- Aquí estamos analizando la URL porque la URL consta de datos sin procesar y no podemos usarla.
- Ahora tenemos que decodificar o analizar el json usando json.decode (response.body) tomado de dart: convert package
- En el paso anterior decodificamos el cuerpo porque los datos sin procesar están presentes en el cuerpo de la respuesta
- Más métodos
- Por supuesto podemos realizar distintos tipos de conexión con métodos de tipo get, post, put, patch, delete...
Algunos ejemplos que te pueden interesar y que forman parte de mi curso de Flutter.
En este primer ejemplo vemos como realizar peticiones PUT para actualizar contenido pasando un parámetro de identificador mediante la URL; ademas de, pasar mediante el body un campo llamado products” el cual no es mas que una lista de identificadores, tambien, vemos como usar los headers, en este caso, para pasar el token de autenticación:
final res = await http.put(
Uri.parse("http://10.0.2.2:1337/favorites/${user.favoriteId}"),
body: {
"products": json.encode(productsFavoriteId),
},
headers: {
"Authorization": "Bearer ${user.jwt}"
});En este segundo ejemplo, vemos como realizar una petición tipo GET a un dominio, pasando un identificador y protección mediante token de autenticación; luego, evaluamos la respuesta para saber si la misma fue satisfactoria mediante una petición 200:
final res = await http.get(
Uri.parse("http://10.0.2.2:1337/favorites/${user.favoriteId}"),
headers: {"Authorization": "Bearer ${user.jwt}"});
print(res.statusCode);
if (res.statusCode == 200) {
final resData = json.decode(res.body);
}En este segundo ejemplo, vemos como enviar une petición post con dos campos suministrados en el body:
final res = await http.get(Uri.parse("http://10.0.2.2:1337/products"));
final List<dynamic> resData = json.decode(res.body);
final res = await http.post(Uri.parse('http://10.0.2.2:1337/auth/local'), body: {
"identifier": _emailController.text,
"password": _passwordController.text,
});En todos los casos, es importante recordar que, son peticiones asincronas, cualquier tipo de peticiones que no forme parte de la aplicacion, si no de medios externos, como acceder al disco, una memoria o en este caso, una petición HTTP, se realizan mediante procesos asincronos.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter