API Integration in flutter | Fetching data from API | Flutter Tutorial

hey guys welcome back to my channel my name is praveen and you are watching techie ravi so basically in this video we are going to talk about how to integrate an api into your application so without wasting time let's get started so basically uh this is my flutter app and the output is uh like this i have an app bar and inside uh my body i have pt one container and hello world this is my basic app i have created my uh stateful widget like this and inside uh straightforward i have scaffold app bar and inside the body i have a creative and container whose height is 200 which is 300 and i have wrapped this to a center to make it center and inside the uh container i have created one text widget in the name of hello world which is also wrapped by center to make it center of the container so this is my basic app i have created so basically we are going to integrate api uh in this uh in this basic uh design so i have used one dependency name is pepsi dot yml uh inside of my obsidor by amin i have to use sctp to enter to integrate https response into my app so uh let's get started so i'm going to open my uh api response so this is the open source api that is i'm going to uh share the link in the description it's an open source you can easily use it on your app for the learning purpose it having a lot of api responses get call posts call put patch delete channels having different different types of responses as well so we are going to start with a very basic uh get call so this is uh for we are going to uh use single user first and then we are going to make it uh uh more complicated uh apis by multiple users by list of users so we are going to use single user first so before starting or before integrate uh integrating any api to your app you have to understand what type of json data we have or what type of response we are getting from the internet so we have to understand the json response so currently uh this is my json response if i click on this url i am getting this type of response this is my response of my single user it's a power single user and this is for multiple users so uh this is uh your list and inside you see your string response and inside testing response there is a map value what is the map value of the the information that we are getting in the form of key value pairs id is a key and two is the value email is the key and generate dot give us request dot in is the value first name is the key and unit is the value so this is known as uh key value pair this is known as map values and if i am using list users this is known as list this is also a map value inside the one map value data it having a list as a information so we are getting uh inside of one list inside one map value so we are going to integrate this into our app so before integrating we have to understand what type of data we have so that we have to plan according to the data and let me import one package for http that is http and i have to write one function to call api future api call and i have to make it asynchronous perfect http dot response because we are getting response uh from http and we have to store this into a variable and then satp dot get because we we are using get calls so here i am using get if you want you can use post if you are working with post calls you can use put if you are working for good calls as well perfect so i am getting only uh i'm working only on get calls so we have to uh save that is the string response perfect and now uri dot parts perfect now let me copy my url for this this is my complete url just copy and paste it we okay if we have to make it as a wait function by a wait because we have to wait uh we wait for the response so let me check uh from where i am getting this error okay i have to save it in response perfect now here is gone so let me give my condition if my response dot status code why status code i have a lot of option like we have what information we are getting from uh my http is called uh we're getting a body we are getting headers we are getting requests we are getting status code so you can give conditions on the basis of any information but uh most common is status code i mean this is the question so if my credit score is 200 means if i getting the proper response on the uh my url from my server then what happened and i have to change the state so i have to uh use string response and i have to to copy the body so what will happen if my status code is 200 then what is going to be happen it my response or body should save into a string response and we have to call this here string uh stream response dot to string why to stream because we have to convert this into string let's run the app okay i have made one mistake i haven't called this okay let's call this function perfect now i have got the data so if you click on this one you will get this complete data right complete data of my response basically it gives me the complete body of my response this is my complete body of my response so through this you you will able to get the complete body of your response to your app now i have to uh get only a data part right so what i have to do this is your map so i have to define one map value map so this is my map response so for this i have to use one uh one import why i have to use one package that is to convert the response to map value and and map response equals to string response okay json.decode i have to record it listen dot sorry how to decode this body perfect so if you want you can remove it and then i have to use map response and i need only data so i put data here see this data let me run the app okay i got one error but i got my data see inside this i have id email first name last name and inside my id email first name last name and response so it's working fine but i have got one error and the error is because of the method was called null so i have to make one thing okay map response perfect now if you want you can show some text here data is loading means if my condition is not true or if uh if my api is not getting the response then what screen should be shown to the user so puppet let me run once again see if the edit is common see data is loading this so basically if my data is not loading all the time it will takes to load a data it will show my loading screen so if you want you can remove it and show an empty container as well so it's totally your choice what screen you want to show the user when your data is loading puppets now it's working fine now the same goes with uh my expo support data so you can just copy it and paste it here you will get the data from support support have only you all contribution towards server and all so uh you're getting these type of response from this now what if i want id um whatever i want a details of my data inside the data so what we have to do is it's again a map value it's again a map value so we have to use another response of map data let me create one other variable data data response and use it here let's do map response and inside this i have to define data perfect and now we are getting inside data and i have to make changes in here also data response data response and this is also my data response okay now i want id uh i want uh first name just copy it and you will get your first name janet it is my first name let's do it for uh last name you will get paper perfect now if i want support data inside a support we have to put support here support here because i have i have stored the value of map response support inside one variable and inside the variable we are passing the same thing support inside the support we have text so just copy paste it and you are getting complete response of your support now i think uh i think everything uh is fine and we are uh you are able to understand the concept of api integration so let's make it uh more complicated and let's go to this api since that is api i have map values inside this i have one list also so let's integrate my data part so this is my data so i have to change the url first and i have to pass my data you see i have to get the data so i have to pass here data and i have uh and inside the data there is a list so we have to make one list values so we have to define a list variable list response i have to change this to a less response and this response analyst response and list always have a have index value which starts from zero so let's uh use zero here and let's run the app see i have got my zeroness value means this is my zero index from here to here i am getting zero this is my 1 this is my 2 and so on this is my zero index value i have i have to get id email first name last name and from here 0 if i make it 1 then i will get uh id number eight see id number eight email and all perfect now what if i want the uh only first name inside data what i have to do so i what uh you need to do is you have to just pass it here first name then only you will get only first name michael from the list of data from the interest value is 0 it will search first name in the response of data with index value is 1 so the index value is one so my answer will be uh linseed see the output is rinsing what if i want uh the email id of my zero index id of my zero index so i have to make it zero and this is my id let me run this this is seven my answer is seven perfect so now this is the way you can easily integrate your apis a difficult apis into your app so uh let's take one more result how to count the length of my uh data available and let's see how to integrate all our data in one uh listview builder so i am going to create one list view unless we build up sorry and here i am giving context index and it will return container so how can i get the length of my available list so without item count item count and then i'm taking the list as a response because i want a list of data so if a list equals to null if give me 0 data or you can print some text as well and list response dot length so uh by default it will count the length uh and it will show only the uh available data only the available information or you are getting inside a list and let's create some column since i chose inside a column i have to i i need one image image dot network and i have to uh i have to take the image from here so it is now avatar so my ui is avatar so less response this response index let me see the spelling and let me run this code first and see everything is working fine or not perfect now excuse me complete length of available data available images so if you want you can give padding around this image and also you can decorate every image by using containers and other decorative things so it gives me gives me a padding so i need a bit data so i need text less response dot index and here i need my id email sorry i have written this inside the padding project five id email first name id first name last name and last name and yes so let me run this final code okay the integer [Music] okay okay i'm so sorry i have to convert this into a string value to string and to string because i'm getting a different response so it's always a good idea to convert every information you're getting to convert this to a string and let me run again it's just a typo error so let me run this again i'm so sorry for the typo error yes it's working fine now uh so this is the way you can integrate your api uh you can also decorate it by uh using continuous and any other way so basically what i have done i i have saved this uh converted this response into a list response and inside less response uh i have given the length so basically if my response value is null it is uh show me zero response it will show me a basic container and it will uh what will be the count of this it will give me the complete uh it will give me the length of my this response so i hope you are you like the video and uh i'm able to explain you the concept very uh easily and if you are facing any issue in api integration of data you can comment me in the youtube section or you can follow me on twitter instagram and facebook and you can message me anytime i will always there for you and if you are facing any issue let me know in the comment section i will definitely try to solve your problem as soon as possible thank goodness a lot

Channel: Techie Praveen

Views: 83,018

Keywords: xd, design, flutter, tutorial, how to, android, ios, ui, adobe, latest, theme, app, flutter ui, adobe xd to flutter, adobe xd flutter, flutter tutorial, flutter 1.17, flutter ui design, flutter animation, animation, layout, rounded corner, learn flutter, flutter dart, flutter sdk, codex, rest api tutorial, rest, flutter rest api, json, API Integration in flutter, Fetching data from API, Flutter Tutorial, API, api call in flutter, flutter backend tutorial, flutter backend development

Id: D5nVnRjPrKA

Length: 23min 23sec (1403 seconds)

Published: Sun Jun 06 2021