01 Flutter API call | Flutter REST API Series

friends in this video i am going to show you how you can make a api call in flutter application here you can see that i am having a brand new project which is having this counter application so it's very simple you click on plus and it increment the count like this so i am going to start from this point so you can also create a new project and follow the video easily so let's remove all the code and start by importing the material dot dot after that i will call main function and inside that i will call another function which is run app and i will pass the widget called my app which i have not created at this point so let's create so now i am having a widget called my app which will return material app so i will keep the app very simple i will just have one home and that is going to be home screen so i have not created the home screen yet so let's uh go to your lib and create a folder called screen and inside that i will create a file called home dot dot so i will start by importing material dot dot so material dot dot and now i will create a stateful stf and i will name it home screen and let's return a scaffold that's it so now i am going to import this home screen widget here and it is complaining so i need to make it const okay this looks awesome let's create a bar now and yeah now you can see in the right side in my liter i am having a simple application with a abba let's add a title which will be a rest api call so you can see it's fine so now we have something so now at this point i will create one button which will be a floating action button so i will call the api whenever we will press this button so on press we are calling fetch users so you see there is a button whenever we will click on that it will call fetch users and it is going to print fetch users okay so let's click here and we got fetch users called so you can see that this action is getting performed on the floating action button click so now i am going to use this package which is http uh you can go to this url and read about this package so i will take this package and come to my pubspec.tml inside the dependency after cupertino i will paste it http okay now let's stop the application and let's start again so it's a good practice to like restart the application whenever you are adding any new dependency okay so now let's import the http package as alias http so now i will write http dot get and here i have to pass the uri so final url equal to uri dot parse and inside this we have to pass the uh let's make it ur i okay so inside this we have to pass the url and url equal to some like api url so i will show you the api url which i am going to use this in video so i will have a url and that will be passed to uri so here i am going to use a random user api so let's go to documentation and yeah requesting multiple users so using this api we can request for multiple users so it will give me or return like multiple users so in the url you just have to say how many users you want so i said result equal to 2 it will return me 2 users so inside the result you see there is two objects so if i write three inside the result you will find there is three object i hope you got the idea how this is working based on the url number it is returning the random users so let's use this api so for now let's use or fetch only 10 users so i have url so and i will make a hit on this url so i will make a request to this url and whenever i am making any request to any url it will take some time to return the response from that url or server so i have to use await because i am waiting for the response so until this doesn't like get the response it will not move to the next line so i will get the response once i get the response the response will have headers body and different properties i am interested in body so body is something which is appearing here you see in the browser the body was that okay so once you get the body it will be in the form of string so you can use json decode pass the string and return okay so now this has been converted to json so now i got the json and this json is having a [Music] key value pair so this is having result and info so we are interested in results so result is basically list of users so let's list of dynamic okay so now i will come here and i will say users equal to json and here i have to say the key so the key is results okay and that's it so now whatever i will get in the result i will assign it to users variable okay so now everything looks good now what i will do i will check by pressing on the button if this is working or not because there is one print statement at the first and there is one other print statement at the last and in the line number 30 we are having this url in the line number 31 we are parsing that url to uri after that we are making a api call okay let's press the button okay we see fetch user called fetch user completed which means uh this function phase user is being called and it is also getting completed after some time so now it's time to show the response what we are getting so what i will do i will return list dial list tile awesome okay so now i have to give the item count so it's going to be users.length so suppose if there is 10 user the count will be 10 so there will be 10 list styles so from the users using the index number i will get the first user and i will like show some title so title is going to be text and it is going to be email so i will show email as the title so let's see one of the object so let's open the first object and we find that there are lots of properties so we are going to pick the simpler one so name is complex so let's pick the email we will talk about name also but uh first let's use the email so final email and from the user i will say the key which is email so you see i get the value so if i update the result to the 100 if i press this button you will find that the api is getting called again now we have 100 record okay now i can add something to the leading so let's add index first so you see now we are having the index which start from 0 ends at 99 which means total of 100 item so that was index if i add 1 to this this becomes the counting number it will start from 1 and end at 100 so let's add a circular avatar now it will look more good okay so we can so image here also if we want if you want to so name we can show that also so let's show something else because we already saw the email so let's try to show the name and let's save it i got some error and we need to understand why we get the error okay so it was expecting string as the data and you see the name is not a string but the email was string so somehow we need to like convert this name to the string so i will write to string so you see now this one is looking looking a little weird but this is a string so this was the problem so whenever you are having non-string thing you cannot using text so now i ask for first so now i got the first name if i write something else a key which is not present i will get the error so we have to make sure we use the right key always okay so we have now name also so we can use image or we can show the image also so you can see there is picture and inside the picture we have thumbnail so let's use picture and after that we can come here and we can pick any of the image url i am going to the use thumbnail so this is going to be image url so for this we can use image from network and let's pause image url again we are getting some errors we need to understand what's the error type string image from memory it's wrong we need to use image from network so now we see we have this image but this is not looking circular let's remove it so if we want to make it circular there is one other easier widget which is clip round rectangle so using this you just have to provide the border radius and let's provide border radius circular 100 and now it's circular okay so that's it so you see you can make a api call get the data so the image everything looks good in the next video i will improve this code and make it more like production ready code

Channel: Nitish Kumar Singh

Views: 97,153

Keywords: Nitish, Kumar, Singh, Flutter, API Call, flutter rest api, Rest api

Id: ExPFnu8Dm40

Length: 11min 40sec (700 seconds)

Published: Tue Aug 16 2022