Flutter: Consumiendo un API REST ( Future / http ) [ Desde Cero ] - Parte 01

En esta ocasión vamos comenzar a consumir una API REST real con un ejemplo completo, consumiendo el API de GiPHY.
Paquete http: pub.dev/packag...
Giphy Developer: developers.gip...
Mejor Hosting: n9.cl/hosting-...
Curso completo: tinyurl.com/y3...
Página web: tinyurl.com/y5...
Facebook: tinyurl.com/yy...

Curso completo: tinyurl.com/y322eobx Mejor Hosting: n9.cl/hosting-correcto Paquete http: pub.dev/packages/http Giphy Developer: developers.giphy.com/ Página web: tinyurl.com/y5gmvsc6 Facebook: tinyurl.com/yy568zlt

[@variprogramacion2458]

Para los que tienen problemas con la parte del Future traten con esto: Future _getGif() async{ final response = await http.get(Uri.parse("peguen la URL de su api")); }

[@nodgardseguiasnunez6544]

Te amo

[@JulioPc2804]

tambien te Amo

[@alfredorodriguez8532]

también ti amo

[@aaronzapata7118]

Hola, buen tutorial, entendí a la perfección y yo creo que la mejor manera de aprender más es programando uno mismo como lo dijiste en uno de tus videos, yo realicé una API REST en visual studio y ya la tengo publicada mediante IIS en windows, ahora el consumir su información casi me resulta un reto ya que en el caso de GIPHY se almacena en una lista llamada "data", en el caso de mi api no tenía ningún nombre la lista donde estaban los datos, así que me dispuse a intentar buscar como acceder a los datos, ya que, sin eso no podía mostrar los datos. Investigando encontré que envés de mandar un jsonDta["NombreLista"] simplemente debia mandar el objeto jsonData, de esa forma logré que se mostraran los datos de mi api. Muchas gracias por el tutorial y me gustan full tus videos.

[@juniorcr47]

Oye hermano explicas muy bien me atrevería a decirte que explicaste está sección un poco mejor que otro profesores que udemy estoy suscrito

Gracias por tus palabras amigo. En Udemy hay muy buenos profesores así que es un honor escuchar eso. Jaja.

[@gideonjonathan1984]

I know I am quite off topic but do anybody know a good site to stream new movies online?

[@edisonmorgan9199]

@Gideon Jonathan Flixportal

[@gideonjonathan1984]

@Edison Morgan Thank you, I signed up and it seems to work :) Appreciate it!!

[@edisonmorgan9199]

@Gideon Jonathan you are welcome xD

[@XProcesses]

Hola Professor , Tengo un error : la URL de Giffy no puede ir dentro de un string . Error: The argument type 'String' can't be assigned to the parameter type 'Uri'.

[@XProcesses]

Solucion : http.get(Uri.parse('swapi.co/api/people')); o http.get(Uri.https('swapi.co', 'api/people'));

Básicamente es saber que la versión nueva de http pide que se envíe un objeto de tipo Uri. El código que propone Abdelhalim, es correcto, entendiendo que lo que está entre las comillas debe ser la URL que quieres consultar.

[@henrymosqueradev]

HTTP.get(Uri.Parse("aqui ´pones la url"));

[@juanbenitez7266]

buenas noches quisiera hacerle una consulta frente a un problema que tengo en flutter, es que realizo una petición que devuelve unos valores pero para realizar otra petición pasando como parámetro uno del los valores que devuelve json, no me permite tomar ese valor y pasarlo a la nueva petición para que m muestre los valores de esta nueva petición según el parámetro recibido

[@elrabeltv6014]

Me gusta tu curso, pero con el update de Flutter esta desactualizado y personas como yo que de verdad vengo desde CERO no consigo continuar, solo da errores y por mucho que leo comentarios y busco no consigo solucionarlo para poder seguir. :( Gracias de antemano por el trabajo realizado!

[@isaaccruznieto6354]

The body might complete normally, causing 'null' to be returned, but the return type is a potentially non-nullable type. Try adding either a return or a throw statement at the end" este es el error que me sale ayudame xfavor

[@pablogonzalezrobles4429]

Pregunta. No sería mejor usar un try catch en vez del if else porque pueden pasar varias cosas raras en la api como error de escrito, nulos, etc. Solo pregunto pero muy bien vídeo. Muy explicativo

Muy buena pregunta. Podría usarse, lo que pasa es que las api pueden devolver valores variados. Si una api esta controlando los errores desde el backend, pueden devolver un código 404 por ejemplo, con un mensaje diciendo que no se encontró lo que se buscaba. La petición sería exitosa, devolvería información así que el try la dejaría pasar. Con el if puedo verificar el resultado y si viene con un código 200 que por convención se usa cuando todo salió bien en la API. Si tu api no valida los errores en el backend, entonces si tiene que usarse si o si un Try Catch.

[@pablogonzalezrobles4429]

@ buen punto de visto. Sigue así. Muy buen contenido, claro y conciso que es lo que se necesita en los tutoriales de flutter. Espero que puedas subir a futuro videos acerca de layout, de sus jerarquías y clásicos errores como colocar expande dentro de otro que no es flexible y da error, que me pasó hace unos días y me tomó horas llegar a la respuesta por tener poco conocimiento acerca delos widget contenedores

[@brayanedilcruz7395]

por si no les funciona hasta el minuto 16:52, traten de escribir return []; luego del else{}

[@SofiaSoto-mr1qs]

jajajaja genial el curso, gracias por el conocimiento y x relajar con memes, muy bueno!

[@luzgenesis7]

genial video graciasss!!!, sería muy interesante que hagas uno donde enseñes como crear apis :) !!

Por supuesto, ese es el siguiente paso obligatorio. Primero enseñaré a usar Firebase, que es como la base de datos ideal para Flutter ya que es creada por el mismo Google. Luego aprenderemos crear y a consumir EndPoints creadas por nosotros mismos en Node js o en PHP. Pengo muchos vídeos pendientes. Jaja

[@marcoantoniocalle2868]

los mejores videos de flutter

[@lgomez1290]

excelente tutorial solo que en android studio tuve error http.get(url) en android studio me decía que necesitaba un tipo de dato Uri no String pero convirtiéndolo a ese dato me funciono bien

Si, en las nuevas versiones del paquete tienes que convertir a Uri.parse(“url”); creo que tengo que actualizar el vídeo.

[@perlagodinez6830]

a mi igual me manda error.... sólo cambié a http.get(Uri.parse('url'));

[@anonymushadow282]

Gracias, justo tenía ese prblema

[@gabrielperez8577]

Este programa solo se pueden introducir por computadora o pude existir la posibilidad de aplicarlo derechamente al movil

Si te refieres a ver el resultado en un móvil mientras lo programas si se puede. Solo debes activar las opciones de desarrollo en el celular conectarlo al PC.

[@luisrobertonavarro7581]

He aprendido mucho, pero evidentemente tenemos que adaptarnos a las cuestiones del NullSafety. Tengo el código exactamanete igual que el video, pero me arroja error al iniciar el for (var item in jsonData["data"]) { Se produjo una excepción. _TypeError (type '_InternalLinkedHashMap' is not a subtype of type 'Iterable') Alguien me podría ayudar, gracias!!!

[@sebasmorales5701]

El unico problema de este video es que se acabo :c Lo bueno es que ya hay segunda parte lo malo es que tambien tiene fin :c

[@marcecam747]

muy bien explicado, esperando la segunda parte gracias

Ya está lista la segunda parte, usamos un FutureBuilder para representar la información que traemos de Internet. kzbin.info/www/bejne/oaHNmIeirsqNoLc

[@worchock]

una pregunta, no hay una mejor manera de castear los errores cuando existe por ejemplo un bad request? es decir, que en el retorno pueda ser un objeto cuando es éxitoso pero cuando es un error retorné un mensaje string

Claro, en Dart también existe los valores nullables y también los try catch. Eso debería ser suficiente para manejar los errores.

[@worchock]

@ pero y en tal caso que uno deba retornar el mensaje de error que retorne el back, sabes como se haría, es decir que el método puede retornar un modelo por sí es ok u el otro por sí es error

[@rusbelthnietorosado9485]

Me sale el siguiente error cuando levanto el app. "Error: ADB exited with exit code 1 Performing Streamed Install". No se que sucede con mi Emulador.

Intenta crear otro emulador, con la API 29. Quiza así se solucione. Es la que yo estoy usando.

[@rusbelthnietorosado9485]

@ si con otro si me funciona en este caso mi móvil, pero ahora tengo un nuevo móvil y quise levantarlo ahi pero me sale ese error. T_T. mi anterior móvil lo vendí y ya no estará conmigo T_T

[@wjbtc4395]

Hola al crear la clase Gif no puedo hacerla como aparece en el video solo puedo de la siguiente manera class Gif { String? name; String? url; Gif({this.name, this.url}) { name = name; url = url; } } pero al hacerlo asi la sigunte linea de codigo me da error gifs.add(Gif(items[''])); como podria solucionarlo?

[@agustingonzalez2395]

crees que puedes hacerlo pero con el flutter y el servidor en la misma computadora?

Si se puede, solo debes lanzar el servidor y escuchar en la dirección IP de tu computadora y su respectivo puerto.

[@chotrufa]

hola, muy buen video, pero no se si podrias explicar como hacer una peticion donde mandes un parametro, por ejemplo, yo quisiera en el caso de los gif que sean los que son de navidad, entonces que yo pueda pasar como parametro navidad y solo salgan esos

[@cesarfavelaaguilar3375]

tambien me da error al copiar esta libreria, import 'package:list_giphy/models/Gif.dart';

[@byan993]

hola, disculpa no acostumbro a solicitar ayudas pero me encuentro estancado en un dilema, talvez puedes hacer tutorial haciendo una petición pero cargando los datos en un BottomNavigationBar

¿Lo que necesitas es que desde el backend mandar las opciones que mostrará el BottomNavigatorBar?

[@zamora322]

Hola, gracias por compartir, ¿Qué plugin utilizas para el auto-completado? Gracias.

Busca Flutter Snippers Awesome

[@la220999]

gran tutorial amigo! una pregunta, al momento de consumir una api me arroja un status code 403, sabes que podría estar causando ese problema?

Revisa si la API requiere de algún Token, normalmente se usa el 403 cuando el servidor recibe la petición pero decide no responder por alguna razón, generalmente son problemas de permisos o falta de parámetros.

[@la220999]

@ es una API que realicé en php y mysql, montada en xampp, y al consumirla con Postman si me da un status code 200, el problema es al consumirla en flutter

[@jefersonchinchilla4356]

Si el Json no trae el "data" para recorrerlo en el for que debería de colocar?

Si el JSON no trae cada puede hacer que se muestre un widget diferente. Una imagen o un texto. Se regresará un arreglo vacío. Con 0 en el .length.

[@fabulososcuentosymas9008]

class DataApi { String t; String i"; DataApi(t, i) { this.t = t; this.i = i; } } Tal como lo escribes, me da error, parece que el String no puede ser null, por lo que le puse String t=""; String i=""; ahora, no se si es correcto hacer eso o si representara un problema mas adelante, me puedes guiar? Non-nullable instance field 't' and 'i' must be initialized. Try adding an initializer expression, or add a field initializer in this constructor, or mark it 'late'

Para crear las Class te recomiendo este sitio web: app.quicktype.io/ elige como lenguaje Dart y el te generará el código para crearla, ya con las validaciones de Non-nullable y los métodos para crear instancias. Muy útil.

[@edgardomolina7993]

Crees q sea posible q actualices el video con la nueva http 0.13

si, tienes toda la razón, ya hace falta una actualización de este vídeo.

[@viktorarellanes9786]

Buen video

[@estebanlopez95]

Hola tengo un problema y esto es lo que me tira flutter (error: A non-null value must be returned since the return type 'List' doesn't allow null.)

[@alfonsoromero3092]

que opinión te merece wordpress como api? saludos

Funciona bien y las peticiones son pocas. Siempre va a depender del tipo de hosting que tengas, pero Wordpress a pesar de ser funcional no es eficiente a la hora de manejar los recursos. Si tu aplicación tiene más de mil peticiones al día quizá sea mejor optar por una api personalizada.

[@RodrigoPerez-xx9ou]

Hola excelente el curso , tengo un solucionarlo Future _getGifs() async{ me marca error en _getGifs me dice lo siguiente The body might complete normally, causing 'null' to be returned, but the return type is a potentially non-nullable type me podras dar una mano a ver si puedo seguir.... mil gracias

[@RodrigoPerez-xx9ou]

Ya lo pude solucionar . Gracias

[@bernyabreu42]

hola bro, como lo solucionaste? recién estoy viendo el video y tengo el mismo problema

[@rodrigoperezibiricu]

@@bernyabreu42 sacale todo lo de la izquiera a _getGifs()

[@anonymushadow282]

Me pasa igual

[@sebastiantorres4772]

@@rodrigoperezibiricu correcto si funciona asi

[@cesarfavelaaguilar3375]

List gifs = []; Saben porque me da error en la palabra Gif

[@miltonserrano2734]

para los que tienen problemas con Future a mi se me corrigio agregando y cambiandolo por: late final _listadoGifs...saludos

[@nelsonjavieravila1082]

gracias muy buen tutorial

[@masmusicaperu]

Biem video :D

Gracias. 😁

[@cesarelideleonaguilar4214]

Future _listado; tengo error en el list de gif lo tengo de esta manera y me dice que no esta inicializado alguien me ayuda

[@juanluisjimenezsandoval3870]

elimina Future y deja solo el _listado

[@angelcasanchez7229]

me da error al enviar la url de la api

[@cesarfavelaaguilar3375]

hazle asi bro http.get(Uri.parse( "url"));

[@aboel22]

cual seria la diferencia de usar los aquetes dio?

[@porfirioramosfernandez9613]

gracias buen video

[@youtubeuser5874]

Muy buen video gracias Saludos!!

[@victor45436]

Buen video bro, gracias por compartir tus conocimientos de Flutter.. like y nuevo sub!

[@ex0dias616]

cada actualización tanto del lenguaje como del FW le complican más hacer las cosas

[@DanielGonzalez-ju4eo]

Buenas noches primero que nada gracias por este video, muy buena explicacion . Me presenta este error alguna solucion es mi version de flutter Installing build\app\outputs\flutter-apk\app.apk... 3,8s E/flutter (15208): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: type '_InternalLinkedHashMap' is not a subtype of type 'Iterable' E/flutter (15208): #0 _MyAppState._getGifs (package:flutter_application_2/main.dart:30:32) E/flutter (15208): E/flutter (15208):

¿En que momento surge el error?

[@laradevs4342]

lo resolviste? tengo el mismo problema

[@loveandmakeit6530]

dart(argument_type_not_assigned to the param...dart(argument_type_not_assignable) quien me ayuda ;;=)????????????????????????????????????????????????????????????????

[@THeIvanGamer2013]

Para aquellos que no les funciona el _listadoGifs en la version actual(si les asigna un late al listado), deben declarar de la siguiente forma Future _getGifs()async{}.. late final Future _listadoGifs = _getGifs(); @override void initstate(){ _listadoGifs; Super.initstate(); }

[@THeIvanGamer2013]

Pd me doy cuenta que no se inicializa el _listadoGifs en initstate, es mejor declarar el _listadoGifs y asignarle el _getGifs en una linea

[@ggaltar]

@@THeIvanGamer2013 hola hola. Muchas gracias por compartir esta solución. No entendí la Pd, podrías ampliar un poco en eso de asignarle el _getGifs en una línea. Tal vez copiando el código, es que no me está funcionando el _listadoGifs. Muchas gracias, saludos.

[@THeIvanGamer2013]

@@ggaltarapenas llegue a casa reviso

[@ggaltar]

@@THeIvanGamer2013 ok muchas gracias!!

[@carlosbe8008]

@@THeIvanGamer2013 Si llegaste a casa amigo? :(

[@yormanlopez8553]

Por lo menos deja el código ese ni sirve . 😡🤬

[@nathaliealvarezhernandez5649]

yo tengo problemas con recorrer el json, me aparece type '_InternalLinkedHashMap' is not a subtype of type 'List'. lograset resolverlo?

[@55xpanama]

en la linea de codigo: gifs.add(Gif(item["title"], item["image"]["downsized"]["url"])); me envia el siguiente error NoSuchMethodError (NoSuchMethodError: The method '[]' was called on null. Receiver: null Tried calling: []("downsized"))

[@55xpanama]

alguien me pueda ayudar en el initState me envia este error @override void initState() { // TODO: implement initState super.initState(); _listadoGifs = _getGifs(); } // _TypeError (type 'Future' is not a subtype of type 'Future')