Updating and Deleting Data from API using GetX in Flutter

hey everyone welcome back to another flutter video in this video I'm gonna show you how to update or delete data from API in our previous videos we have seen how we can register login or fetch data from API if you don't know about them I will leave the link for tutorial in the description you can check and now let's see the demo how it works and I will show you how to implement this one alright our app is running here and if I provide some user ID here and press get data we should be able to get the user information here and if I want to change the username to some new name and also change the gender from female to male and if I press the update data it should update the user detail and if I clear the fields and get data again you can see the updated data from API similarly if I want to delete this user by pressing this delete button data is deleted and if we want to fetch again we get this error it means there's no such user exists so this is what we are going to implement in this tutorial if you like the video don't forget to like And subscribe to the channel so you won't miss such amazing videos in the future and without talking too much let's get started with the video and see how we can implement this one alright let's get started so in this tutorial I'm gonna use this website that will allow me to update user detail and also delete user and if you want to use this website you have to create an account and they will provide you with an API key to do operations in their apis I already have an account and API key so now let's go ahead and fetch user detail but before fetching let me create a new user and then we can fetch the user detail using this API endpoint it will allow us to create user so I will paste that in point and then send and response will get that email name gender and status is required and we have to pass some values all right so I have some Demi data and be sure to pass your token as beer token right here and now if I send I will get the result so now I have the user ID and if I go and copy the fetch method endpoint I can paste it here select the git and pass my user ID and I will get the result or detail of user now to check the update we have to come to this endpoint pass user ID and then update any field that we want so an update we can choose either put or patch as it's instructed in the API so I'm using put and then passing user ID and here I want to change name to my name and now if I send it will update the name to my name and now if I get the same user ID the name will be updated now let's change the gender from male to female it will change the gender and now if you get the user the gender is updated now let's try and delete the user and see if it works for deleting you have to choose the method as delete and then give the endpoint and user ID and be sure to pass your token and if we send this we won't get any output because it's not provided by API but the user is already deleted if you can see we are fetching the same user ID but resource is not found it means user is deleted so the API is working perfectly fine now let's write our code and see how we can update and delete user from flutter application first thing you have to do is import these two packages next we're gonna create a folder for our model and inside here I'm going to create a file called user underscore model.org here I will write my model according to what data comes from API and for that I can copy my Json data and use an online converter to convert the Json data into Dart model I can simply paste my data give it last name and then copy the model code now I can paste it here and you can see we have variables for our data and also getter Setter everything ready so we can save this and close it next we're gonna create a folder for our controllers and inside here I'm going to create a file called user underscore controller.dart so inside my controller file I will create a class called user controller which extends from gitex controller now let's write separate functions to fetch user data update and also delete and here I'm going to create user model instance refrige user data from API now I'm going to create separate text editing controllers for our name email status and gender and then it will allow us to update data to API using the interface all right let's write the user interface code okay first we have to create an instance of our user controller and then down below here in the body I have created four text editing fields for name email gender and status and one text field for taking user ID and then using that user ID we will fetch user data all right let's see our interface in the application and then we will proceed with writing the controller code all right this is our user interface and we will provide the user ID and by pressing the get data all the user detail will be shown there so now let's write the body for these functions to get user data update and delete and since I have written code for fetching data from API multiple times in my previous projects and videos I can just copy and paste it here using Pieces by searching gitex fetch API data this makes it simple to manage your code Snippets you can create your own custom Snippets and use them in any project it also offers good Auto completion copying Snippets from any website or extracting from images and much more you can use these features entirely offline or you can connect to the cloud and share your code Snippets with your friends the good news is that it is completely free head over to code.pcs.app install and upgrade your productivity now that we have our Snippets ready we can go ahead and replace our URL with the endpoints that we have I can copy the endpoint for getting user detail from here and paste it here and at the end it will pass the user ID of course I will accept that as parameter from Fetch user function and also here we have to pass our blr token as authorization and once this is successful I want to print the result here so now if I go to my home screen and on press of this button I call the function and then pass the user ID we will pass this user that we have already created and paste it here and now if we save it and click the button from our app we should be able to get the user detail in the console you can see we have the user detail we can also assign it into our user model which we have created up there and also I want to assign the values which comes from API into text editing controllers to show the live updates now if I save the application and go ahead press this button all the values and data should be come into their relevant Fields so if I pass some user ID here which in this case I have passed manually I want to pass this user ID from that text editing field that I have created there now if I paste this user ID it should show me the updated and the latest user detail so now let's make two more buttons for update and delete and I will also fix this by changing column to list View and now it's good so let's go ahead and Implement our update function the same way I can get this code from Pieces by simply typing gettex update API and now here I have to change my API URL I will grab my API URL for update and at the end I have to pass the user ID in the body I want to pass the values from text editing controllers that we have name email status and gender and down in the header I have to pass the authorization Bearer because without providing the token we cannot update or do any changes into API and if the updation is successful I will print the update is successful and I will also print the data which is updated so now let's call this method in the on press of update and pass the user ID from the text editing controller that we have now if I save the application and test it let's change the name to Old name instead of new name and then press update as you can see it is updated here and if you fetch the user again it is old name not new name alright now let's write the code for deleting from API we have got the code snippet already for deleting API we have to choose the method as delete and we can simply pass the URL from here by the user ID and we will not get anything in the body of the response body some apis provide the response body as success or something or maybe the user detail but this API does not provide anything so in this case we also do not have to pass body for it we can simply pass user ID as parameter and then we can remove the body and again token is required because without token we cannot delete update or do anything to API so once deletion is successful I want to print that data is deleted successfully and since we are not getting anything from body I can comment that line as well now if I save the application and paste our app let's get a user ID so we have this user ID created now if I paste that user ID here the user detail is showing up now if I try to delete this user you can see we're getting error that status code is not 200 it means that it does not return 200 instead of that it returns some other code but execution of code is successful and user is already successfully deleted you can see here it returns 204 instead of 200 because the body of the Json is empty while deleting user it does not return anybody that's the reason we are getting status code AS 204 instead of 200 so changing that condition now I'm getting another user ID and then trying to delete this new user and we should not see that error again it just says user deleted successfully and if we fetch that user there's error because the user is already deleted even if we fetch from Postman there's no resource and user is successfully deleted so this is how we can Implement update and delete from API using gitx and flutter alright it's the time to install pieces hello over to this website choose your platform download the software and then come to the vs code search for pieces and install the extension and enjoy coding you can find the link in the description and also if you've got any question don't forget to comment down and I will try to respond as soon as possible if you enjoyed the video don't forget to like And subscribe to the channel so you won't miss such amazing videos in the future thank you for watching and I will see you in the next video

Channel: Lazy TechNo

Views: 6,056

Keywords: get post delete api, api delete request example, delete data from api, delete data from api flutter, delete data from api in flutter, delete api in flutter, how to delete data from api, flutter data from api, update data flutter, update api flutter, update data in api in flutter, how to update data in flutter, flutter getx api example, api call using getx flutter, getx api call flutter github, flutter getx crud api, flutter getx rest api example, flutter getx example

Id: fjnAQB18hLI

Length: 11min 4sec (664 seconds)

Published: Tue Jan 31 2023