Get data from Api in flutter - HTTP Requests in flutter

so the video that the lesson that we are going to be doing today is about how we can get the data from api into our map so what i've done is i have used this api from the json holder.typeycode.com it's available free you can just go to their website and use this one so this is a list of users with their details in it so this has id name username email and stuff like that so as you can see that there are a total of 10 users here you can see the id goes up to 10. so we are going to see how we can pull the data from this api into our app and show it on the screen so what i have here is i have a very basic simple design and remove the counter app and you know i have created a stateful widget which says data from api so i have a scaffold here it's an app bar and there but has the title so the first thing that we are going to do is we are going to click create a class called user so what this class is going to do we are going we are not going to be taking all the information in there we are only going to be taking the basic information so we will create a final string and will take in the name the email and the username so this is what we are going to do and we are going to create a constructor now okay so the constructor is now done so a class has now been made so what we will need to do now is we will need to create a function that will get the data from the api and to create that function we are heading back to our stateful widget so what we will do is i'll create a function here i'll call it get user data okay yeah so the first thing that we need to do is we will also need the http package from flutter you can go ahead and you know take it from the pub.dev so or else you can just use this http and this will work very fine so i'll just click on pubget i'll come back to my main dot dot i'll get the dependencies okay so we are done here so now what we need to do is i've created this function get user data so let's start building this function so this function is a future so it will be of type async so what async basically means is whenever you are creating a function that is getting value from somewhere else that is getting value from the web so that function is might take some time to get in the information so that is the reason we create that function as an async which means an asynchronous function so i'll create a response here i'll create a variable response so what this is going to do is this is going to say await so whenever we are using async we also need to use a weight so what the weight does is it tells the function that you have to wait for this command to complete in order to display the result so what this will do is this will say http okay so i'll have to import that file first let me just go ahead and do that so i'll import the package http package and i'm going to say as http as we are going to use this as an http so here we were i will say http dot get okay so what happened earlier was whenever we wanted to get anything from the internet in our app we could simply type in the url and you know it would get the data but things have changed now let me just show it to you what happened so once i go ahead and copy this url i come back to my app i paste it over here and i finish this line so what as soon as i finish this line you know it won't take it it won't accept this line let me just put this inside inverted commas okay you will say you will see the error the argument type string can't be assigned to the parameter type uri so now what we need to do is there are a few changes that have been made we'll need to declare a uri so what we will do here is we will say uri dot https okay so the authority is the main the header of our api so what's the header here this is the header so we will use this and we will paste that inside here inside the inverted commas okay so this is our header and what is the unencoded path so the unencoded path is going to be the uh the remaining part of our link here so that is in our case is users so we will copy this from here and just paste it along here inside the inverted commas okay so this is done all right so now you can see that we are getting the response we are asking http dot get to await and inside we have the uri.https so we have the https here because this website as you can see here is a secure website if whatever api whatever website you are using is not a secure one so you can only use the http rest the syntax stays the same so what we will do now is we will declare a variable called json data and we will say json decode and the source is going to be the response source is coming from this response so we will say the source is response dot body okay so we are done with this part now so now let us go to the next line what we are going to do is we are going to create a list and the list will be of user so the class that we have already created and what this is i'm going to name this list as users and this is currently going to point to null so there's no data inside this as of now so now to put the data inside we'll declare a for loop and we will say for variable u in json data what we will do is we will add and what we are going to add we will say user so we are going to instantiate that user class now we are going to say user user is equal to user and inside this we will have you as we've already said about and we have three different things here we have the name then we have the email and then we have the username okay i need to put this inside the inverted commas okay so let me just finish the statement off and now we are going to add the data into a into this list so we will say users users dot add because we are adding the list inside the data so we need to call this list shares this list uses so users.add and the value is going to be this user all right so we're done with this function here so let me just go ahead and print the you know users.length the list of the length of this list so i will say users dot length so let me just go ahead and save it and this is going to return users this is going to return the list of the users okay we don't have anything here yet and let me just also make this function a future as this will be returning the value from the future so now to get some result here i'll just show how we can check if everything is working fine so inside our scaffold in the body of the scaffold i'll create a center and inside the center i'll call the child i'll name it elevated button i'm sorry i'm going to use the elevated button so the elevated button will take a child and i'm just going to say it will be a text widget and it says click me all right so once this is done i'll set a non-pressed and what the on press is going to do is is going to call that function and that function it get user data all right so let me just go ahead and quickly hot restart okay so the hot restart is done now once i click here you can see that it says flutter 10 and white says 10 because it's returning the list of the users it's returning the length of the users and users.length as we saw right here the length is 10. here you can see the last one is 10 so now let us just go ahead and you know print this data so that it's more visible inside the app so i'll just go into the body and i'll remove everything here and inside the body i'll have a container we could also use anything else here i'm using the container so this container will have a child i am going to use a card as a child and inside the child we will need a future builder why the future builder because it's building the data depending on the availability when it's coming from the future so i i will say the child of this car is a future builder all right so now this will take a future and what's the future future is that function future is coming from here so the future is get user data and once the future has been called we will also need to give it a builder so let us just go ahead and give it a builder okay so what is the builder builder is going to take our context and our snapshot so what is the snapshot snapshot is actually the data that is being returned to us from the api so we are going to use the snapshot to check whether the data has been returned or not and also if it has been returned we are going to show it right here so let us just go ahead and do it now so i will say if snapshot.data is equal to null what happens in that case in that case it's going to return a container and inside the child of the container i'm going to take a center and for the child of center i'm going to take a text and this text is going to say loading okay so let me just finish this off with the semicolons all right so you can see it's loading now okay so the build function returned the null because we haven't completed this yet so let us just go ahead and complete this and if in this any case you know this is not true and we have already received the data so what we are going to do is we are going to return a list view i'm going to use a list view here so the list view dot builder and this is going to take an item builder it's also going to take an item count so let me just put in the item count first so the item count is coming from snapshot so item count will be snapshot dot data dot length so this is what the snapshot is going to be and i will say that the item builder will again take in a context and an index to build the list so this will take a context and an index and what this is going to do is this is going to return as a list child okay now you can see that nothing here nothing is here because we haven't entered anything into the list child yet so let us just go ahead and do that so the list i'll be taking a title and the title i will name it a text widget and what this would say is it would say snapshot dot data take it from the index and display the name so now once i save this you can see that the names are here and if we go ahead and check with this let me just go back okay you can see that the first name is lena graham then erwin hoewell and then it says clementine bosch and patricia lipsack so you can see that the names are all here similarly we will do for the other things we will say that the subtitle is also a text and it says snapshot dot data and from the index it's going to take the username so now once i say this okay you can see that the usernames are also here and if we want to show any other information here so i'll create one more text widget and it will say snapshot dot data and this will take in an index and it will show me the email okay you can see that we have all the information here so you can go ahead and you know make this thing beautiful and everything as per your requirement but this is essentially how we are going to be using this so rather than you know putting putting the url directly into the get http dot get here what needs to be done now is you have to decode the url and then put is that the header header and the uh risk thing linking to it so this is how we are going to work with our you know http responses so let me know if you have any different queries for this and i hope this was very useful for you and keep supporting me keep subscribing thank you have a great day bye bye

Channel: Flutter With Me

Views: 46,348

Keywords: http, post, http post, flutter, flutter google, flutter sdk, flutter http, http request, http post request, post request, api, api calling, post api, http post api, flutter framework, flutter ui, http request in flutter, http request rest api, http in flutter, http request with flutter, easy approach, maaz aftab, flutter google sdk, flutter tutorial, http flutter tutorial, flutter http tutorial, tutorial, flutter video tutorial, http post request flutter, api calling flutter

Id: hgPTvi0OM4A

Length: 14min 59sec (899 seconds)

Published: Mon Mar 08 2021