Http Post Method - Flutter || Post Data to API in flutter

you welcome back to my channel so today we are back with another video in which we are going to see how http post method works in flutter what we do what we implement to make that work so we are going to use an api to check the http post method so this is the website request.in so you can use this website to use different kinds of method you have different methods here get post put patch delete and things like that so we are working on the post method today so in the post method what we are going to do is if you can see here we'll put in the name and the job and we should get in the response the name the job the id and the time at which it was created so this is the uh you know the sub link of the this part request dot in and the response code is 201 so 201 basically means that the response is valid so let us get back to our flip code and see how we are going to work with it here okay so this is the sample flutter code i've deleted all the unwanted elements from here and i have renamed the class to the title to http post method and i have an empty container here so inside this empty container we are going to need two main items here the first one is the name and the second one is the job title so let us going uh get going and start working with it so first i'm going the thing i'm going to do is i'm going to add some padding here so i'm going to add it on all the sides let's say i'll add 20 okay so we have added the padding and then what we are going to do is we'll we are going to create a column sorry okay oh i'm sorry the container is going to have a child and the child will be a column so the child is the column our column will have some children's so the first children that we are going to take here is going will be a text field and we will need two text fields here so okay so i'll do one thing you know inside the text field i'll create a decoration and the decoration will be of type input decoration and i'll add some borders to it so border and the border is going to be outline input border okay so as you can see we have our first text field here i'll also add a hint to make it clear so my hint text will be entered name here okay you can see that the hint text is also here now so now i'll just copy and paste this text field but before we do do that you know we are going to use two type of controllers here text editing controller the first one will take the name and the second one will take in the job so let me just create you know these two things here so what i'm going to do is right here i'm going to take two controllers so the first one i'm going to call name controller and this will be of type text editing controller and i'll create one more here text editing controller i'll call this one job controller and what this is again going to be a type of text editing controller okay so the first text field we are using for the name so in here our controller will be name controller and now i'll just copy and paste these this text field here for the second part which is a job controller and i'll change the controller and this thing here i will say enter job title here and this is going to be a job controller okay so now once i save this you can see now we have two text field options here the first one is the name and the second one is for the title i just add a size box in between to give some gap so i'll keep the height to 10 all right so now you can see we have some gap in here also i'll create a button here which will be used to submit the data so i'll say elevated button on pressed for now i'm going to keep it null and the child will be a text which will say submit all right so we can see everything here so let us do one more thing you know which is a very good practice because see let's just say you add more of a padding here so you know it just come down so whenever the keyboard is open you get that overflow overflow pixel message so what you need to do is you just need to go into your scaffold and inside the scaffold the first child you should have should be the single child scroll view so let me just add that here all right so single child scroll view is here so even if the keyboard is there you know it is just going to shift uh the things upside so uh we don't get that overflowed pixel message here all right so we have two different controllers here so now the second thing that we need to do is we need to create a model class of this response here so for to create the model class the best thing i always like to use is i i just go here i use this website here quick type dot io so i'll just go here and paste this here okay so you can see that everything is created right here it does everything for you i've selected the source type as json and the language here is dart so i'll just copy the code i'll go back to my code i'll create a model class here inside my library so what i'm going to do is i will create a dart file i'll call it data model and inside here i'll just paste it okay so you can see that we have the data model here so this has the name the job the id and created at which will show us the date and time and whenever we don't want to use this model class what we need to do is we need to use this final data model data model from json.json string so this will pass on the data to this class as per this class as for the items in this class so the next next thing that we would need to do is we will need to you know create a future function that is going to post the data so let us just go ahead and create the future function now so right here we will create our future function so that will be a future of type data model okay it's giving me some error let me just check why okay so this is a future of type data model i'll call this submit data and even before we do that you know we need to import this data model let me just import it and even before this we need to add the http package so let me just go ahead and quickly put in the http package so to get the http package we will go to pubspec dot yaml file and in here we will go to pub.dev and let me just search for http okay so here is the http package let me just go and to install this we'll just copy this dependency and add it into our prospect.yaml all right so it's done now we'll just click on pubget so that it can get all the details of the http package all right it's done so let us just go back to our main dot dot and what we are going to do here is we are going to import our http package so i'll import http dot dot and i'll import is that http so now let's get back to the future function we were creating let's get back there okay so this future function as it is a future it's going to be of type async all right so let me just call it an async and what this is going to do is this is going to take in a response so i'll create a variable called response i'll say await for http dot post okay so in the post function i will say uri dot https and inside https we need the authority and we need the unencoded path so what is the authority authority is right here authority is this header so i'll just copy it from here and i'll paste it in here and remember while putting in the authority we don't need to type https as we have already said that this is https and we also don't need this backslash here and what is the unencoded path unencoded path is right here this one so i'll just copy this here slash api slash users i'll go here and paste this inside the unencoded path all right so i'll just finish the statement off as a semicolon all right so we are done with this part till now so the next thing that we are going to do is we also need to pass in the body so the body we have two things here we have the name and we have the job so the first thing is name and the second thing is the job okay it's giving us an error right now because we have not initialized the job or anything here right now so i'll just do that in a while so let me just initialize these two things so it's going to be a string of name and it's going to be a string of type jaw so now the error is gone so let us proceed to the next step so i'll say i'll create a variable called data and the data will be of type response.body so whatever the response we get from the http it's going to be stored inside this variable data and just for our reference i'm going to print this data and let us do one more thing so we'll check if the response of the status code is two zero one this status code here uh this one it's two zero one so we are going to push it okay we are going to see if it's working so what we are going to do is we are going to say if response dot status code is equal to 201 so we are using double equal here as we are not assigning any value here we are rather checking it so i will say a string of response string is response dot body and what we we'll do now is we will return it to the data model but before returning it to the data model we need to initialize the data model so we'll do that and before uh let me just go here and say data model from json as we read that earlier is going to take in the response string and if the statement is not true we are just going to return null all right so we are done with this thing here so let us go back to the next step let us initialize the data model the first thing that we need to do so i will say data model underscore data model so i've initialized our data model now so now we need to push you know pass this function inside the elevated button that we just created here so let us just go and do that here okay so inside the on press again this on press it's going to be an asynchronous function as it's going to take a value from the future so what we will i will do is i will say string of name is equal to name controller and a string called job is going to be the job controller okay it's giving us the error here because i have not passed in as it takes so let me just do that and the same thing here all right so both of these have been passed in as text now so what i will say is i will say that the data model of data i'll create and i'm creating an object of data model it will say await and now we are going to use this here this one function which says submit data and this is going to take in the name and the job which we have already assigned up here and then we are going to set the state we are going to update the values as underscore data model this is going to be equal to the data that we pass into it so let me just save everything you see that everything is working absolutely fine here we have no errors and everything so let us just see if our data is being posted so i've opened the run window here i'm going to quickly hot restart our app all right so let me enter a name here so i'll just type in the name as test user and the job title i will say as test job so let me click on submit see once i click on submit you can see that we have the response so the name is test user job is test job id is 620 and this was created at this time so if i click on submit again you will see that the id and the time to keep changing so this is exactly how we use the http post method to work in flutter and if i update the values here let me just show that to you so let me just say user is blank and job is unknown so you can see it says user is blank job is unknown id is 192 and it's located at this time so this is how we work with the http method in post so if you have any questions any queries regarding the same let me know and i'll make sure i can be of all the help to you whatever your queries are so once again thank you for watching this video have a great day have a good time thank you bye

Channel: Flutter With Me

Views: 9,496

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: nEcb3ieAICs

Length: 17min 32sec (1052 seconds)

Published: Tue Mar 30 2021