How to integrate Rest API in Flutter Application

welcome back to snippet coder and we are back with our video in this video we will learn about how we can do the rest API integration overflow replication and with the help of that we will understand all that requests like get request post request put request and rate request and for our example video we are going to consume this API so this is the website which we are going to consume in our demo application so that we can understand all that requests easily so it is having a lot of requests like list users single user then we have the singer user not found and we have a list resources single resource like this way then we have the put request also for the patch request delete request every requests are over there so on the basis of that we will understand each and every request and mostly we will cover only four requests which is very important overflow replication like get request put request post requisite and delete request so before starting a video if you are new to our Channel subscribe our Channel by click on the Subscribe button and click the Bell icon to get notified about our latest videos thank you foreign [Music] application we have to use this plugin that is HTTP and this plugin is used to connect our application with the rest API and documentation also very simple and we will consume this plugin in our filler application so now let's move to our flutter application so here first of all we have to go to our Pub spec and there we have to add that plugin and here we will add the plugin so now the plugin has been added so now first of all we have to go to a lift folder and there we have to get one new file that is config dot dot file and in this file we will Define our URL and and apis and all and we will create the class here class config and here we will write static because we have to access those variable as from the static class constraint string API URL is equal to now we will go to the website and see the URL and all and here the website we have just copied this one and we have to paste here and we have to make sure we will remove the https from here then we will create the endpoint here we will write a static constant string API and point is equal to and for this also if we go to the website and we will check what the endpoints are and if we click here you can see here we have slash API then we have the users if we go to the second AP and here also the endpoint is slash API slash users and here also we will check same this one is not request because we are going to cover the user API and all here in the trade also we have the same endpoint that is AP slash users so now we will go to our application and we will use this API and we will write here slash APA slash users now we will create a new file here we will name it as a API underscore service dot dot file here first of all we have to import here import package HTTP HTTP dot dot as HTTP then here we will get the class here class API service here we will get the object for the client here static where client is equal to http dot client so now we have to first consume this list user API and for that we have to create a new function here static future and return type will make it as a list type of dynamic instead of dynamic we can also create a class also but here in this example we are just using a dynamic here then we will name it as a get users and we will make this function as async here then in any API we required a request headers and for that we have to create the request Adder here with that map string string request headers is equal to and in this request header we are going to provide content type then here we have to create one variable where URL is equal to URI Dot and here we have that option of HTTP or https we have to make sure whatever the URL we are having we have to use that accordingly in our example we are having that https so in that case we have to use a https then here we have the multiple Constructors here first one we will provide a config Dot API URL then we have to provide a config Dot EBA endpoint so what it will do it is like we are providing here the URL that is this URL then we have the slash API endpoints that is our APA users then here we have to create one more variable where response is equal to a weight and here we have to make sure we are using async and obix so that whatever the request we are putting here it will be stay on that request instead of going to the next line of the code it will be stay here until unless we get the result from the server and here we have update client dot get request because this is the get request that's why we are going to call here get requested and here we have to pass the URL then we have to pass the request headers for that we have to call the variable here headers then here we will put request headers then here we will check if response dot status code is equal to 200 that means success there are lot of status code we have to make sure if the status code is 200 that means success if the status code is different other than the 200 that means that request is not successfully generated and here we are checking if the request status code is 200 that means that we are getting the result from the server then we will create one variable that is where data is equal to Json decode so whatever the data we are getting that is in a string format so now we have to decode that data into the that map format and all and here we will write response dot body and from here we will just return here data and here by default we will return a null and we have to make this function as a nullable and we will make this return type as a nullable then only we can put here return null so what we did here we have just created one function that is get users and there we are just creating that request header and that is used for passing some headers in the request example here we are using the content time also we can use the authentication header also we can pass that we will cover later on in our poster question all and then we have created the variable for the URL and there we are just calling a URI dot https because our URL is in the https format then we are just passing your API URL then we have our API endpoints then here we are just creating one variable where response is equal to 8 then we are calling it client dot get request and we are just passing this URL and we are just passing here headers here then we are checking here if the request dot status code is 200 that means the request is successful then we are just decoding that data whatever the data we are getting in the response.body because that is in our string format then here we are just returning that data and then in the default we are just calling a null so now we will go to our main.dart file and from there we will just call this function so in this example we are not going to use that UI and all we are just going to use our main dot dot so that we can understand what our data we are calling and whatever the data we are getting or not and here we have to make this async and here we will write where data is equal to a weight APS service dot get users so it will await till the time we not get any data it will not proceed to the app and then we will print this one and we will put the debugger also here so that we can understand whatever data we are getting from the server so now we will run our application so from here we will just run our application to see is it working or not so here we are getting some error so let's see what the issue is so here the issue is because we put here list as a dynamic but the data we are getting in only denim not in a list and we will change our return type here and we will save our application and reload the application so now here you can see we are getting our data so now we will go to our main.dot and here you can see we are getting our data in the data we are getting page per page then we are getting total then we are getting total Pages then we are getting a data also in the key format then also we are getting some support variable also that is even not required so this is the main data which is required here and we are getting here so now suppose if you want to return only this data from our that APS service so what we have to do there we have to just go there and we will change our return type again to list and we make it as a nullable here and from here we will just return here data of data this one so we will reload our application to see now here you can see we are getting the list of the data here and we are getting all ID email ID first name last name then we are getting the profile pic also and we are getting total record of around six data so and here in the return we are just passing here the data of data because here if we go to the browser and if we click here on the list users you can see this is the response and the response we have page per page then we have the total page size then we are getting total Pages then we are getting this data so our requirement is to show this data from our applications for that purpose we change this one to date of data now let's move further and then we will understand how we can do the post request so now we will learn about the post request and for that we have to use this one that is APA slash user as the endpoint then there we have to use the posts as a method then from there we have to pass two thing that is name and the job here and on the base of that it will return us the data that is name and the job which we pass and the ID which is created and also give us the credit add date also so let's move to the full replication to see and here we will just go there and we will just copy this function and we will paste here and we will change the name as a create user here we will remove the list here and from here we will change it to post request and from here we have to pass the body also in the case of post and we'll pass here first of all we have to make it as a Json in code so that we can send a data in the stint format we will put here Json encode from here we'll get the object here and the object we have to see whatever we have to pass and here we have to pass this one and we will just copy this one and we will paste here and from here we have to pass the name and the job and this value we have to pass from here we will change it to and we will pass two parameters that is username user job and we will assign here same for the this one also and we'll paste here and the status code 200 we have to get that data response dot body we will convert it to Json decode and here instead of doing this data with data we have to just pass here data because if we see here we are getting the response as a single object for that reason we have to use this one for that reason we have to use this one we have to remove other part and we will save here so what we did here we have just created a new function that is create user there we are just passing two variables first when the username then we have the user job in the request header we have that content type then we have the URL layer we are just using here UI dot https with that AP URL then the API endpoints here we have here header parts then we have the body part and here in the body we have to make sure we are just doing that Json encode so that we are just passing this object as a string over there so if you don't want to do that we can just convert it to this one into the string also instead of using this Json in code and then in the name we are just assigned this username then we are the job we are assigning it with the user job here we are checking if the status code is 200 then we are getting the response else we are getting a null so now we will go to the main.dot file here we will comment this code and we will just put here where create user data is equal to a weight APS service Dot create user then we have to pass a username and we'll pass here Raman and here we will pass in the role as if we will pass a developer then here in the print we will put here so now we will reload our application to see is it working or not so here we are getting the null so now let's see what the issues and we have to go there and we have to put a debugger here and again we have to reload the application so here we are getting status code 200 so the issue is that the user is getting created but we put the wrong code in the case of that create request the status code is 201 and we have to change it to 2001 that is created status code that means that data has been created in the server so that we have to change here we will save him we will reload our application again so now we will check here we are getting a response code 201 and here we will debug and see what the data we are getting here so here you can see we are getting name job ID created that means our data has been created and the ID number is 196 that means our data is successfully located in the server and we are getting the response also as a single object so in this way we can just create any data with the help of the post request so now let's move further and we will use our put request and also we have our delete request also and for doing that we have to just go to this website and we will see there for the put request is for the updating in that case we will get our status code as a 200 and in that case we have to pass the user also user ID and here we are in the request in the URL we have to put the user ID and then we have to pass the data whatever data we have to modify and for doing that we have to just first call our post request and to note down our user ID so that on the basis of that user ID we will run our put request also so here we are getting the user ideas in 93 and we will note down here 9 3 so now we'll go there and we will just copy this function and we will paste here we will change it to update and here we'll pass one more variable that is user ID and that user ID we have to pass here in the end points we'll put it in the string here we put slash then we will put here dollar sign then this user ID and here we will change it to put request and rest of the everything will be same so what we did here we are just created one function that is update user there we pass that user ID username the user job that is same parameter then we change here client dot put request and here in the endpoint we are just passing our appending our user ID so that it will update only that particular user ID on the wizard that user ID we pass then we have the body here there we are just calling our Json encode with the name and the job and here in the Response Code we have to change it to 200 because in the put request we will get the response 200 we can also verify from here also here you can see 200 and in the case of create requests you can see we have 201 so now we will go to our main.dot file we will command this code and we will put here update user data here we will change it to update user and we will pass here user ID that is 93 and then we will change this name as a updated so that we can verify it is working or not and we will reload our application to see is it working or not so here you can see we are getting a name Raman updated then we have the job developer updated that means our update data is also working fine with the help of that put request so now let's move further to our last request that is that delete request and that will be used for deleting any data for that we have to just go to a browser and here we have delete request here we have to just pass it that value here that user ID and the response we will get on it 204 that means I'll use a deleted successfully now I will go to our APS service we will copy this data and we will paste here we will change this function name to delete user and we will just pass a user ID and in the body we will remove because we just need to delete the data and we will change it to delete and the status code we will change it to 204 in the result we will just return type we will change it to cool that means we will pass it true or false on the base of that if the user deleted or not we will put here true in the else condition we will put here false and rest of everything is same so now we will go to our main.dot file here we'll just copy this one and we will comment everything and we will put here delete user data and we call it delete user and we will pass only user ID here we will print and we will get true or false here we will just reload our application to see is it working or not so here we are getting true that means the user has been deleted successfully that means our delete AP is also working fine when the on the base of this way we can delete any user from our rest API so these are the four method we use in our rest API first one we have our get request that will be used for getting the data from the server second one is a post request that will be used for posting any data to a server then we have the put request that would be used for updating any data in the server then we have our delete request and that will be used for deleting any data in the server so I hope you understand the concept of the rest API in our flutter application in a very easy way so if you like the video don't forget to subscribe to our Channel like comment share I will come back sooner with another awesome video thank you for watching our video [Music] thank you

Channel: Snippet Coder

Views: 3,670

Keywords: how to integrate rest api in flutter, rest api flutter, how to post request in fiverr, how to send http request get/post in flutter, flutter tutorial, flutter tutorial for beginners, flutter course, how to http delete request in flutter, how to put request in flutter, nodejs flutter, rest api freecodecamp

Id: p29G-GVzm8g

Length: 19min 39sec (1179 seconds)

Published: Thu Nov 17 2022