Flutter Provider Http Request With Example | State Management

hello everyone assalamualaikum here we'll see  how to use provider state management for loading   data from the network and do this beautiful  animation so take a look we are loading data   and the animation loading is done we see the data  well to get started you should install these three   packages provider is for state management http  for network request and loading data from network   and flutter spin kit for animation well we'll  use six steps to complete this process and get   http request or do http request and update data  using provider well first we have to understand   our data so let's go ahead and see our data you  can go ahead and use any tool you can use postman   or a browser that's okay and then go ahead and  type in this url while it does a get request   and then it returns a json format which is  also more like a map so here we have a key   value key value so here we see that if we are  going to make a model we have to use these four   fields but to be simple in this tutorial we'll  just use two fields title and body in our model   so after having the basic understanding  of our data now we can make a data model   so let's go ahead and create a data model so  you can use a postman or any browser and type   in this url and then you will get a response  like this this is a get request now here we do   have some fields user id id title and body so  this is very important because this tells us   how we are going to build our data model class  using dart here we see four fields but for now   we'll just use two fields over here title and  body to build our data model class over here i   created a new i created a new file which is called  datamodel.dart so this is our data model class and   here we have two fields which is title and body  and as well as we have this constructor and then   we have this from json method because we'll pass  the information used to this object and then we'll   decode it and then we'll create a model data model  object using the decoded information over here   well after creating a data model now we'll see  step number three which is creating a service   class for loading our data from the network so  here i have created a dart class which is called a   service class so here is my service class and over  here i have a single method which is called single   post data over here i'm using this http package  as http and after that i'm using http.getmethod   to get data from the server and as you see over  here i'm using uri.purse to parse it to a string   over here and then i'm also passing the content  type in the header and after that if the get   request is successful we get the data from the  server and if we get the data from the server   we check the status code and if the status  code is 200 then we decode the body and from   the body use that information to send it to from  json which in return it will create a data model   object which it would be stored over here now see  over here we are using this question mark because   it might be null okay because if we don't get  200 we are just simply doing print error if we   get 200 then we are returning the result okay and  if we return the if we can get the result then we   return it but if we don't get the result it  will simply over here return null so that's   why over here i'm saying that it could be null and  after creating the service class for loading data   next we'll create a data class with the change  notifier so here i have this data class which   extends change notifier because over here these  are the data that we want to load and tell the   ui that we have data so here we created a post  object using data model and then we use this   get single post data which comes from this class  over here so we call it from our change notifier   and put it in our object and once it's loaded  it returns then we notify using notify listeners   so that our ui know we have new data incoming  after creating the data class now we'll see how   to create a provider with change notifier provider  well to do that i have to come to my main method   so over here i'll remove everything and after  removing everything instead of returning a   material app we are returning change notifier  provider as you can see we are passing context   as well as we are creating the provider  using data class and our child is material   app do see that here we don't have home  yet which we are going to create now well next we'll see how to load and show the data   well to do that in our main.over here  we'll create a new stateful class so here we created a new stateful class and this  is where this is a very basic class and inside   this we have this in state method and inside this  init state method we are creating we are creating   an instance of this our data class so that we can  get access to our get post data now do remember   get post data is coming from here where it loads  the data from the server and put it in this object   so if we can call this method from here we'd  be able to load the data and as well as create   an object of this data class using this provider  and then we'll create an instance of this provider   which is post model data because we  want to access the provider class its   data inside this build model and then we'll  replace this container with this scaffold   now this is our scaffold and here we have this  app title and then as you see earlier we created   this post model data using this provider class  which is a provider provider of this data class   because of this we would be able to access the  data in this data class which has this poster data   okay or the data model using this post  object so over here we created this object   now because we created this object over here we  can access post and its title post and its body   now we go ahead and run our app and we see that  first we see the app bar and we see the data is   loaded and it takes a bit of time because it comes  from the server so now we'll do the animation   to do animation right here over here we do a  conditional check using this post model object   by referring to is loading which is over here do  remember that when it tries to load it is it true   when the loading is done it is false so we'll use  this conditional check so here we do post model so here we have used  postmodel.loading which refers to   this variable over here and if it is true we show  this animation inside this container and if it is   loaded done then is loading become false so  we fall back to this condition let's run it   so here we see beautiful animation and the  data is loaded let's run it one more time   here is our animation it's  running and our data thank you so

Channel: dbestech

Views: 19,122

Keywords: flutter Provider Http request, flutter provider state management, flutter http get request, flutter provider rest api, flutter provider http get request, flutter provider http example, flutter provider api call

Id: FAQ6U-fh1xw

Length: 7min 52sec (472 seconds)

Published: Fri Mar 25 2022