Flutter Provider Http Post Request Example | With Given Code | Signup Page Restful Api

hello everyone assalamualaikum  we'll use provider state management   for signing up going to a new page and  loading information as well as do animation   so here i have this simple page  and i'll click on this sign up page   and it will take me to a page like this  and here i will type in my credentials now i'll click on the sign up there was  an animation and it took me this page   now if we go ahead and check our database so i see info at the best well to get started go  ahead and install these three packages provider is   for state management this is for network request  and this one is for animation so this is the data   we want to send using this post method now here  we are sending our name phone number email and   password and this is our endpoint and we are  hosting it in a local host so as i click on   the send button we'll see while it returns a  new response and if we go ahead and check our   database over here this is a new record the best  tag this one and this is my email which exactly   we have just now over here here i created  a new dart class which is signup model data the data we want to send will create  a model so here is our model we have these   four fields and then a constructor and then we  also have this json method because this is the   method we want to use before sending our data  to the server because we have to convert them to   json well we created another new  class which is called service class   so here this is our service class and over  here we have a method which is called register   and at the top we have used http as http  so that we can use its object over here we   created an instance named response from this  response object now here this is the http.post   method and over here we are sending three  parameters uri headers and a body and at the end   if we get this http response back then we return  the response regardless it fails or pass you see   over here that we are passing our url over here  and it contains our endpoint just like we saw in   postman once again this is very important you  have to send three parameters at least your url   headers and your body now over here before you  send to your before you send this data to database   make sure that you call this to json method which  we have seen earlier we have seen early from here   so to json method and at the same time we make  sure that our encoding has no problem so we use   json incurred one more time so this is our data  class and over here we have this two boolean and   at the same time our method post data is receiving  signup body as an object and we pass this object   to register method which is over here so we pass  it to the register method and register method   encoded as a json and send it to the server so we wait for the response and as we get the  response we check it if the check is 200 then   we set this boolean to true and then regardless  whatever the response is we set this loading to   false because we want to do an animation and  we will use this boolean to go to another page   and at the end we have this notified listeners  we have notified listeners two times so that   we can get notified immediately as the boolean  changes different times so this is our main.dart   and if you run it you'd see a result like this and  inside this we have created this multiprovider and   at the same time we are using this data class to  create a provider using change notifier provider   and after that we have the stateless class  which is my app and from here we are calling   provider demo screen and then from provider demo  screen we are just doing basic ui and inside this   provider demo screen we have a on tap event from  here we want to navigate to a different page and   then we have created this sign up page sign  up page for our four fields we have these four   controllers and then we have a registration  method and this method would get called later   now inside this we have all this ui and over  here inside this gesture detector we have this   registration method set this registration  method over here first we are creating an   object based on these four fields because they  are data controllers so they can hold the data   and we are getting all these data and we are  passing all these data to this signup body   which is over here this is our model class so as  we pass data from here it uses this constructor   to make an object and then we get this object if  we can get this object right after that we'll be   using it but before that we get an instance  from our provider class which is data class   so this is our provider class so using this class  using provider.off we create and provider object   and after creating this object we can call this  post method from this class to remember that this   class has a method which is called post data so as  we have the object we can go ahead and call this method and this method would return us a result  and we wait for it and as we wait for it now   there is a boolean that might change which we set  inside this post data method if the status code is   200 then we set it to true which means that if it  is a true then we can navigate to somewhere else   so we want to navigate to home page so we created  a new class homepage but here we just have pretty   much some basic ui and that's all so right  after everything we'll go ahead and run our app   so now here we are now all we need  to do we need to go to our main.dart   and over here instead of this container  so over here instead of this container   we'll call signup page now we'll go ahead  and run our app now this is our front page   if we click on this we see a beautiful page  like this and over here we'll use our email i will click on this button now there is  this animation now it went back to this dart   went back to this dark screen that's because  that's because we have a container over here   inside this registration method over here we are  waiting for this callback and if it returns and   if it is true we are supposed to navigate to a  new page but over here we are using a container   which is black so all simply we can replace it  with home page so now we'll do it one more time   so let's restart everything from  the scratch now we'll click on here let's see how it looks now over here we are in  home page now if we go and see our data over   here now let's go ahead and select this one  now as you see so this is the email address   we just typed in this is our name and this  is the phone number so anyway if you learn   something if you like the video don't forget  to subscribe and smash that like button thanks

Channel: dbestech

Views: 14,641

Keywords: flutter provider state management, flutter provider http post request, flutter provider post request, flutter, flutter tutorial, flutter http, flutter post request, futter http post request

Id: cpMpsQfcKU4

Length: 7min 35sec (455 seconds)

Published: Sat Mar 26 2022