Quieres aprender a consumir una API o bien crear solicitudes HTTP en Flutter, en primer lugar debes entender que es una API ( Application Programming Interface), la cual es la comunicación entre dos aplicaciones entre sí, donde se pueda intercambiar servicios que pueden tener distintos costos.
Durante el paso a paso se utilizará el paquete HTTP en Flutter, además la API que se tomará de referencia será la de CoinGecko para averiguar el precio de ethereum.
Contenido
Lo que vas a necesitar
Aquí te dejo los enlaces que vas a necesitar para este post:
- Repositorio: haz click aquí para ver el repositorio del código en github.
- HTTP: haz click aquí para ver el paquete de HTTP
- API: haz click aquí para acceder a la API de CoinGecko
1.INSTALAR HTTP DESDE LA TERMINAL
Cómo crear una API en Flutter ios y Android: paso a paso
Quieres aprender a consumir una API o bien crear solicitudes HTTP en Flutter, en primer lugar debes …
Cómo instalar flutter en mac: android studio y xCode
Si quieres desarrollar aplicaciones para iOS y Android simultáneamente, necesitarás Flutter en mac. …
Cómo crear modal react: paso a paso
Crear modales en React es fundamental para mantener a los usuarios en el sitio web y facilitar conve…
En primer lugar debes copiar el siguiente comando para instalar el paquete http, dentro de una de las terminales de android studio:
flutter pub add httpPegan la línea copiada anteriormente y después verifican si instaló dentro del archivo «pubspec.yami» y si todo el procedimiento salió bien lo deberías observar como la linea 37 de mi repositorio.
El paso a seguir ahora es importarlo, para ello copia el siguiente comando en la parte superior del archivo que estés editando dentro de andoid studio.
import 'package:http/http.dart' as http;Una vez importado ya podemos proceder a la creación de la función de la API.
2. Crear función de la API
La API que se va a utilizar será la de CoinGecko, pues esta nos permite para nuestro ejemplo darnos el precio de ethereum a dólares. A continuación te dejo al función para copiar y pegar o bien, puedes verla desde el repositorio:
Future<void> obtenerTasaEthereum() async{
final url = Uri.parse("https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd");
try{
final respuesta = await http.get(url);
print("respuesta: ${respuesta.body}");
final datos = json.decode(respuesta.body);
final precioObtenido = datos['ethereum']['usd'];
setState(() {
_precio = precioObtenido.toString();
});
}
catch(e){
print("error al obtener tasa.");
}
}Para crear la función tipo get , al ser asíncrona se usa Future y «async», de esta manera esperamos su respuesta para poder continuar con el resto del código.
Después se denomina a esta como «obternerTasaEthereum», por consiguiente se arma la URL que hará la solicitud, que obtendrá la tasa de ethereum. ESTA URL que armamos es predeterminada de cada servicio, por ende si buscas otra API como de clima, o servicios varios, la URL o forma de solicitud SIEMPRE SERÁ DIFERENTE. Puedes copiar la URL aquí:
final url = Uri.parse("https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd");Para poder utilizar la url y al ser string, se tiene que utilizar el método «parse» para añadirla a la función. Dentro del try se forma la variable «respuesta» y en esta se utiliza el paquete http; a continuación se crean las variables «datos» y «precioObtenido», las cuales tienen como fin acceder al resultado. Como estas vienen en un archivo json, y al mismo tiempo dentro de un objeto, de esta manera que lo muestro se accede correctamente desde android studio con dart y flutter.
Por último se utiliza setState para mostrar los resultados, actualizando la variable par que esté disponible para mostrarse en el front de la app.
2.1 Añadir precio al front: scaffold.
Cuando ya tenemos la variable lo que queda es mostrarla en el front de la app, y para esto utilizamos un widget de texto, añadiendo la variable:
Text("El precio de ethereum es: ${_precio} usd ")De esta forma mostramos correctamente el precio de eth en usd, en el front de la app.
2.2 Ejecutar función
Este ultimo paso, consiste en donde vamos a ejecutar la función. Puede que en tu código lo hagas en una zona aparte, pero para este post, vamos a hacerlo en el estado inicial o «initSatate». De esta manera cuando inicia este archivo inmediatamente se ejecutará:
@override
void initState(){
super.initState();
// ejecutar función
obtenerTasaEthereum();
}
3.Resultados
Una vez ejecutamos la app desde android studio podemos ver que al inicializar, se muestra el precio de eth en usd de forma correcta.
Video de ayuda
Hice este video para guiarte mejor en el proceso. Haz click para ver y si te gusta, no olvides dar like y suscribirte!
Producto sugerido
Si eres como yo que pasa bastatne tiempo frente al compu, puede que la barra de luz te sirva bastante para cuidar tu vista en esas largas jornadas. También te dejo aquí el post para que veas la reseña completa.
Quntis Lámpara para monitor de computadora, barra de luz para monitor de pantalla para el cuidado de los ojos, lámpara de tareas LED de lectura electrónica con atenuación automática, barra de lámpara regulable, control táctil, sin deslumbramiento de pantalla, ahorro de espacio, lámparas de escritorio para oficina en casa
- Sin reflejos de pantalla y sin parpadeo, antiluz azul: la barra de luz para monitor de computadora Quntis tiene un diseño óptico asimétrico único que ilumina solo tu escritorio y teclado mientras garantiza que no se reflejen en la pantalla. Gracias a su avanzado sistema de protección ocular, nuestras lámparas de escritorio para oficina en casa bloquean la luz azul y la radiación óptica, aliviando eficazmente la fatiga ocular para proteger tus ojos. Es la opción ideal para estudiantes, diseñadores de pintura y trabajadores de oficina de negocios.
Conclusión
Aprender a consumir una API en Flutter implica comprender tanto el concepto de API como la forma en que se realizan solicitudes HTTP utilizando paquetes como http. A través del ejemplo práctico con la API de CoinGecko, se demuestra cómo estructurar una función GET asíncrona con Future, manejar respuestas mediante try-catch, y extraer datos específicos para mostrarlos en la interfaz con setState. Este proceso no solo permite obtener información externa como el precio de Ethereum, sino que también sienta las bases para interactuar con múltiples servicios en aplicaciones Flutter de manera dinámica y eficiente.
