Flutter Riverpod Http Get Request Example | Fetch API State Management

hello everyone assalamu alaikum in this tutorial  we'll see how to use river part to load data from   api and show it on your app like this here we'll  load data from server and then we'll be able to   click on it and go to a new page and come back so  we'll be doing using riverpod for http get request   so let's get started so here i have created  a new project and then i have this main.dart   file over here and inside this i'm going to  create a new folder and we'll call it services inside this we want to create http get request  now in this folder we'll create a new file over here we need to create a  class so let's go ahead and do that   then we are going to use  this endpoint to load data now inside this we want to use http get request to  get data from the server and for this reason we'll   go ahead and install a plugin so now right below  this copper chain icons we're going to install two   plugins one is http plugin that is for http get  request and this is the reverpod plugin and then   inside this method we're gonna use the get method  to load data from the server and for this reason   at the top we need to import the get package let's  go ahead and do it and at the same time we need to   assign a sync modifier we're good to go and after  that we are going to check our response object   so we'll check the status code now here we are  checking whether it's 200 or not if it is not   200 then we are going to throw an error now inside  this we are going to decode our data from server   now we are using json decode function and within  the body we just want to get the data section   now let's go ahead and view this on a  browser why we want to get the data section   so here you see this is our data and inside this  we have a data field so within this we just want   this amount of data okay anything else  we don't want okay so we don't want   this pages uh per page and things like  that okay so we're gonna only retrieve   id email and first name last name and avatar  okay and that all resides within this data   tag or the data field okay now after getting  this data from the server we save it in a list   but we want to convert it to an object so that's  why we need to create a model so we'll go ahead   and create user model class now inside the slip  folder we'll go ahead and create a new directory and insert this models we are  going to create a new file right inside this dart file we are going to create  a user model class and here is our user model   class and it takes id email first name and last  name this is what we have seen just in our api   right over here so we have id email first name  last name and avatar then this is the default   constructor and after that because we are getting  data from the server in json format so we are   passing the json data to this constructor which  is called factory constructor and as we pass it   as we pass the json data it will return us an  object if it returns us an object then in the   ui would be able to access the data like id email  first name last name using the dot operator now   we'll go back to our services.class over here and  inside this we want to use the user model class   and return the data as a list but of course we  need to go ahead and import the library and over   here we want to return a future so that since this  is an asynchronous request so we are returning the   user inside this future and here of course we are  returning a list because we know eventually this   one over here returns a list now over here we  want to create a provider object now that would   be river part provider so here we do provider and  then inside this you have to mention the provider   type in our case this is api service and over here  we need to pass a function but the function itself   takes a ref object and inside this we are going to  pass for the function itself this class which is at the top we need to import river pod package  now after this we need to save it in a variable now the error is gone but actually we need to  understand what is this provider now in river part   this provider is the entry point of shared data  why we are using riverport we are using reaper   part to maintain our state which means that there  would be data in our app and we would use the data   in different places of our app so that data would  be shared whatever we do all the pages or ui would   share the data now riverpod would help you to  create this shared state which means that riverpud   would call the data and that data could be shared  if there is changes in your data river part would   let the ui know that okay you have changes in your  ui so you you have changes in your data or shared   state so let's update the ui okay now for this  reason in general it takes the type so in our case   the provider type it is taking is api services  this class and then over here this ref is more   like a context uh that is default in flutter  framework but we are using ref because we are   trying to use the river part to maintain our  state and then it returns a function over here   it doesn't have to return a function it could  be even a simple text like for example for this   one we can create a very simple example using  so as you see these two lines actually pretty   much very similar so over here once again we are  creating a provider so the function itself takes   a reference and return a string type so these  two are very similar but in this case we are   returning a class and at the same time over here  we are mentioning the type of the class which is   api services so the idea is if you create a class  and for that class if you want to maintain state   you need to inject it inside this provider so  this is more like you are injecting the class now   we'll go ahead and create a new folder inside the  slip folder over here we'll do directory and here now inside this class we have an object of future  provider now this feature provider once again is   coming from riverpod now this feature provider  is useful if you want to create an asynchronous   request for example over here actually we are  doing a network call right so data might not be   available immediately even though our provider  would hold data but if there is changes in the   data would still not be able to know about the new  change because this is an asynchronous request it   doesn't happen automatically it's not like adding  two numbers which we get the response immediately   inside flutter app because it involves here  server so that's why this is a synchronous request   now in general if you have a synchronous  request and for flutter river pod you have   to do that request in fact ensure this  future provider so over here as you see   we are referring to this user provider which is  the object the global object we created early   anyway we don't need this this is the provider  or global variable we have created early   but because this is an asynchronous request so we  want to wrap this provider inside future provider   so that we are able to know when the data is ready  to be used okay and over here from this provider   we are calling this method so here provider also  means like an instance of this class but only   difference is that you are wrapping it around a  provider of river pod which means a shared state   so this data is in shared state which means it  could be shared and at the same time using this   one i can access the methods or the properties  and that's what we are doing here and another   beautiful benefit of this future provider is that  because this is an asynchronous request over here   you get to use this loading state error state and  data so inside this data field actually we are   going to show our data and as we are loading which  would be showing the icon and if things go wrong   then would be showing the error message and this  is the beautiful thing about future provider and   over here because we are listening to data we are  observing if we have changes in the data which is   coming from network so that's why we are using  ref.watch okay i'm watching this object okay i   want to know what happens to you and this is the  meaning of this one okay and whatever happens   i want to get the data you can do whatever  you like i'm watching eventually you have to   get me the data so this is the idea now after  this we are ready to show this data in our ui first over here we are going to create  a stateless class because we are going   to use river parts so we don't  need to create stateful path now how to access this provider or  this data in shared state from here   for this reason here we'll replace this  stateless widget using consumer widget now once again consumer widget is coming  from flutter river pod and this is more   like a stateful widget actually so if you click  on this and if you come over here it says that   it extends consumer stateful widget and  which eventually extends a stateful widget   okay so now we can go back to that our ui over  here of course we do have a bit of error over here   because we need to make some changes now as we are  returning as we are extending consumer widget over   here we need to refer to a river pod context and  what is that one that is called a ref okay now the   arrow should be gone earlier i said that the ref  object is more like a context but that context is   for river pod inside this we want to use this  provider the provider that we created this one   to access data and for this reason here  we can use this object which is called ref   and ref dot we could do watch and inside  this we can use our provider what is our   provider our provider is this one right  now so we'll take this one come over here   let's import the library we'll save  it to a variable we'll call it final okay here i have a simple app bar and after that  we are going to read after that we are going to   do the body and inside this body we want to use  this data object to get the data but actually   this data object is very special it is a callback  function which is when okay now over here it has   this three properties data error and loading and  as you can see data should display your data and   if things go wrong during loading you should show  error and as you are loading you can show your   loading icon over here now for loading we are  going to return a simple widget which is called   circular progress indicator for error property  we are going to return a callback function   if we have error we'll show it in text  now once again this three properties   all coming from our provider and if you use  provider only then you have access to them   and how to deal with this one now over here this  data take a function and for the function itself   you have to provide a list okay now how to do that  so over here would simply do data and then over   here would return a function actually we are going  to return a widget for now we are going to return   a column widget now we know that this object hold  our data as a list so for this reason over here   we are going to create a new list so here we  do list and the list type should be user model now we'll take this object which is data and then  this object has a property that is called map   now we are going to use each element we are going  to access each element using this variable e   so we take each of them and then eventually   we return a list for this because we want to  draw them in an order in our ui this variable   should hold our information for users  the what we got from the api now we'll be   able to access them and for this reason over  here i'm going to return a list view builder since this user list is a list so we'd be able  to access the underlying properties using a dot   operator so here that's what we are doing so we  are getting each of them using this index and   the underlying properties like first name last  name and avatar okay great so this is the time   we want to go ahead and run our app but before  that we need to come to our main.dart and the   first thing we are going to remove all of this  over here and we already have a my homepage class   which is this one but we are not passing anything  to it now we'll simply go ahead and call this one   okay now there's another problem so as  we are using river pod every river part   application should have as we are using  river pod so every river part application   should have provider scope otherwise you  won't be able to use the shared state   so for this reason i'm going to take this one  out over here and over here i would do provider   scope this one and it takes a child and our  child is this one my app now we'll go ahead   and run our app and we'll see how it looks  so here is the data from the server now we   do a bit of styling to it so we're  just going to apply a padding to it now we'll come to our project over  here and we'll create a new folder   and here we'll call it screens and inside this  will create a new file and we'll call it detail   screen dot dart so let's go ahead  and create a stateless class over now what do you want to have in this class now in  this class actually we want to access each of the   item now for this reason would be will pass to  this class an object now that object should be   required this dot e it could be anything you  name it but what is this e so over here we   would do e like this user model okay and we'll  call it e from our home page over here we'll   find a way to send this user model or the object  because we are accessing each of them using this   index right so we have to create a button for  each of them and then we'll pass this model or   object and then we'll be able to access it over  here and as we do it now for the body section we'll have a code like this okay now basically  this is pretty much ui over here but my point   is that over here as we are getting this e which  means our user model and would be access would   be able to access the underlying property using  this dot operator okay now let's go ahead come   to our my home page and over here we'll create a  button so over here we'll create an ontap event   and as you see on tap event is referring to our  details screen as you click on this it will go   to details screen now each time you click it  will pass an object we named it e it doesn't   matter you can name it anything so over here  we have this user list now is a list once again   is the list so we take each of them as a model  and then we pass it to our details screen   now we are using material page route for click  event okay now let's go ahead and run it one   more time and we'll see how it looks so we loaded  the data from the server and we click on this we   go to a new page click on this go to a new page  and that's how you work so the basic idea with   the river pod is that first you have to create a  service class or any kind of class that is more   like a controller and your class itself should  refer to the endpoint and it should load data   now using that survey class now using that service  class you have to return a provider or you have to   create a provider and that should be the entry  point of provider in your app now as you refer   of course that should be a global variable and  that global variable you'd be using in your future   provider why because in our case we are using  asynchronous request okay now that asynchronous   request should be watching the loaded data using  ref dot watch method okay some people might do it   using ref.read but ref.watch is recommended now in  your ui because your ui wants to use this shared   data so it should extend consumer widget and at  the same time you should use the ref object inside   your build method okay and at the same time using  that ref object you take the provider the provider   that you have just created and then you should  save it in a variable okay now that variable or   object should have one convenient method actually  a few convenient method one of them is when   and at the same time you'll also have other  function like map that map function should return   you a list and then you will have a regular list  as you have a list you can access them in your ui   using this index and of course our list contains  an object so underlying properties of this object   we can access them using dot parameter  so yes that's how you work with river pod

Channel: dbestech

Views: 18,831

Keywords: flutter riverpod api, flutter riverpod tutorial, flutter riverpod fetch api, flutter riverpod http, flutter riverpod state management, flutter state management, flutter, flutter riverpod

Id: 2EV5w73QbF4

Length: 19min 0sec (1140 seconds)

Published: Fri Aug 12 2022