Flutter SDK Tutorial - HTTP Requests and REST API (App Development)

hey guys what's going on my name is brand and today I'll be guiding you guys create another critter SDK tutorial now the topic for today will be HTTP requests and REST API so for those who are unfamiliar with the REST API it's basically an API which a lot of services provide to you to get back their data in JSON format easily now we'll be using a website called JSON placeholder type a code comm which which uses the REST API to get back some random JSON data now that data will look a little bit like this so this is a basic JSON file it's a some sort of array with some objects in there so of course we need to get that in our further application and we need to restructure it a little bit so we can use it so I'll be you I'll be running further create right now and cleaning up a project a little bit and I'll talk to you once that is done see you guys in a second all right so I have cleaned up my main add our file I have written some code and I came up with the most particular application in the road probably not ahem so I got a basic application with a button in the center so let's take a look a real quick overview on how I did this so got my main methods we've got my run app function and we are creating a new material app and this new material app has a home page which is a home page this home page is a stateful widgets and the state for this stateful widget is called home page state which has a scaffold Center and arrays bottom which is all this but of course if you're following this tutorial you know I think you at least know a little bit about further already so I'm not gonna go in detail about that of course now let's create our first HTTP request before we can do this of course we need to import some packages so let's say package and this will be the HTTP dart package and I've import that as HTTP and we also need we will be working with asynchronous function so let's import darts async the library for asynchronous functions and I think that's it I think that yeah so let's now start creating our function to get the data now in my home page state I will create a new function which will be called get data reservation is going to be a little different from normal functions that you're right because it's going to be asynchronous this of course we are getting data from the internet which you know if you're not having the best internet connection could take some time so we need to wait for it so it's going to be asynchronous and we're going to promise that at the end of the function we will return something so when it's done we will return something so to do that we use a promise or actually use a future I'm sorry future and it's just return a string so what this future is so it's basically whenever our function is done we will return a string but we don't know when that is going to happen but we promise that it's going to happen somewhere in the future cool and this asynchronous is because it's asynchronous of course now let's create a new variable variable and it's called a response it's going to be equal to armed HTTP dubbed s because we are making a get request and first of all don't forget the semi column and also this URL so first of all this would not work even if we had URL because we need to wait for this function so we need to add a wait over here because we need to wait until we got the data and now we can start adding our URL now this URL of course is going to be different for every single one of you the URL that I'll be using is going to be this one so that it's going to be the first parameter of this function so it's going to be in a string for something like this and now some URI some URLs will have some record brackets like this or something else in the link in the URI and that might show some errors so to resolve those you simply do you or I dots and go to flow and that should fix that so if you have brackets or if you have any weird errors that's probably the reason why now also some services some rest api some api's require you to authenticate so they require you to show that you are who you are with a key so those keys usually go in the headers so we place them in here and it will look something like this key and then some time that column and then over here you just type in your key now of course this is a an open ABI I can use it without a key but if you have a key you will put it in something like this this keyword may differ a little bit so be sure to take a look at the documentation for your API but it will some it will look something like this now we will be using another header which is going to be accept and this header basically says that okay we only want to accept this type of forints so in this case we want to accept jason so we're going to type application slash Jason and it will say okay we want to accept JSON files and if you're not getting a JSON file something is odd something is wrong in here awesome now this is actually a full HTTP request so we're basically done we can now print out our response and a response will be will have a body so we can do print response dot body and that should work now I use the keyboard verbs or for variable over here but if you actually really want to know what type this response variable is it's actually a HTTP dot and puppet abilities request so if you want to be really strict oh yeah that didn't work actually I'm sorry ah h-2b not respond I'm sorry so if you want to be really strict about that you know you can get that in there awesome so let's not refresh our application and see how we are getting data or actually its first at this function to our impress listener for this button so go to your rate button on press we want to get the data let's refresh and now whenever we press this button hopefully you will get back some data awesome so this data should look familiar because it's the exact same as this data of course but it's not quite usable yet because it's still in JSON format so to actually convert this to a list to something that we can use we need to import another package this package is going to be called darts convert and that should allow us to convert Jason to a list now that's great a new variable and it's going to be of size list let's call it theta and this will be equal to Jason Dalton decode because we're decoding or JSON file and we're of course and decoding our response dot body awesome now this will if I print this out this will look a little bit less readable but it's usable of course so you know let's try that let's delete this hope reloads let's get the data and now it's getting you know we're still getting the data it's a little bit less readable but it's usable so that's you know that's a plus of course now it's not really readable so I will be going over to my Jason file over here and let's say that I would really like to get the style so how would I do that how would I actually access that specific data now we know that this is element zero and this is element one because we start counting from one and we are in some sort of array so we already know that we should do for our data print data and we want each second element so one and I will want the title so to get the title we do actually the same thing so square brackets and we say title now we refresh this and press on get data and I will we see the title so key SSA I'm not the best in Latin but let's take a look those still match awesome so that's basically the you know the basics of HTTP request and the rest api i really guys enjoyed this video also something that i want to mention is I used a stateful widgets because I will be adding I will be creating a full video on how to actually get all of this data so all of this data in a list view so that will be the next tutorial so I will add that in the comments down below once that's done and yeah that was actually the video for today I realize guys enjoyed it and I'll talk to you guys in next video bye

Channel: Bram Vanbilsen

Views: 137,940

Keywords: flutter, flutter sdk, app development, android, ios, code, dart, java, google, javascript, swift, app, application, tutorial, beginnners, objective c, beginner, basic, easy, mac, windows, material design, https, http, http request, https request, GET request, HTTP get request, REST API, REST, API, RESTful, RESTful API, JSON, decode, encode, format

Id: m7b7_Nq7XSs

Length: 10min 13sec (613 seconds)

Published: Wed Jul 19 2017