Flutter BLoC Http Get Example | Fetch API Data | Flutter BLoC Pattern Rest Api Call

hello everyone assalamualaikum so here we'll  see how to use block library to do http requests   and manage the state of our app so this is the  app that we're going to build let's restart it   so it auto reload everything and as it reloads  you'll see that there is loading status over   here and then it loads the information from the  server and of course you can go back to next page   click on the certain list and come back so  this is what we'd be doing now because we   are going to fetch data from the server so  first we'll go ahead and create a repository   which means that we'll will build a mechanism to  get the data from the server using our api now to   be able to do that first we'll come over here and  create a new folder inside this and we'll call it   raffles okay now instead this will create a new  dart file and we'll call it repositories.dart so insert this i have this class which is called  user repository and over here i have this endpoint   and then we created a method to get the data and  of course we are going to use http package to do   that so make sure you come to prospect.oml file  and over here you install http package because   we'll be using that package to get data  from the server and then we have another   package our plugin this is called equitable and  we'll learn more about it and we need this and   this is our flutter block and this is what we are  going to focus on today this method is coming from   this package over here okay now we'll go ahead  and take a look at this endpoint over here and   it'll give give us some idea how to build our  model in the browser we can view the response   and as you see the total response is this one and  inside this we have this data property or data tag   and this data tag actually showing this amount  of data over here now this is the data that we   want to focus and over here at the top we want to  focus on id email and we see over here first name   and we also see last name and avatar so it  would be building model based on this data   over here okay or the data fields we or the data  properties we see so now let's go ahead and build   a model we'll build user model file and inside  this will create a user model class so here is   our simple user model class and it is id email  first name last name and avatar and these are   the fields that we have just seen in our response  on the browser and then we created this user model   and factory constructor and for this reason we  have to pass map to it so whatever we get from   the server so that would be more like a map so  after that we'll come to a repository over here   and as you see first we get the response and then  we decode it and after decoding the body we just   take the data section so whatever we get that is  the json decoded which means json information now   from the json information we want to convert  it to an object and those object we wanna   save in a list and then we'll return it that's  what exactly we are doing over here first we need   to import our library which is user model  and over here as you can see this result   we are making it a map and then we are accessing  each of them and as we access we convert it to   an object and then we return it and once the  iteration is done we convert it to a list okay   so over here we want to return a list so here  we are returning a list using this user model   and since this is an asynchronous operation so  over here we are returning as ad so over here   we are returning it as a future okay now we need  to understand what is block block pattern or the   block library so here we'll take a look how to use  block pattern or block for api request first we'll   have our ui and from ui we'll create a call to the  block now of course this block we have to create   using block pattern or block library so this block  will have two things one is event and states so at   first when ui connects with the block the block  will create inside this it will trigger an event   so our ui will trigger an event and that  event eventually would call repository   to the server okay so it will make a connection  to the server eventually through an end point   so from the server we get the data  and the data pass back to event   or the data passed back to our block  once again this block will create   and as we have the data then we trigger a new  state or a new change statements here change okay   so as we have new changes or new states our ui  would know how the ui would know you i would know   using this block the block library of course  it would know it from our block as well okay   because our block connects with the block pattern  library or block okay so this is how it works   so inside the slab we are going to create a new  folder and we'll call it blocks and inside this   blocks here we'll create a new file and we'll  call it appstates dot dart here we go and here   we created our first state and now it may look  very confusing if you are coming from river pod   or get x or even provider what the heck is this  well first to create state you have to create an   abstract class so if we are going to use further  block you have to remember creating states always   happens to by creating a class it's not like get  x you just declare a variable like say x dot obs   and it automatically becomes reactive with get  x sorry with block it doesn't work like that   first thing you have to know in block you have to  create class for each state okay so if you have   states like in get x say for example loading  a boolean you could have bull loading true then if the data is loaded then we can  say loading false okay like that so that's   what we do in florida get x okay but with block  it doesn't like that for each of this variable   each of this variable to be able to manage them  change them change from true to false like that   we have to create a class and this is the class  that we created okay now how it starts actually   so it starts by creating an abstract class so you  might have a separated file like i have over here   appstates.dart and in this class in this file i'll  create a class and that class will not have any   body but that would extend equitable now equitable  is used for comparing two variables whether they   are same or not because if the two variables or  the variables they have the same value we are not   going to trigger a change on the ui we don't want  to draw now equitable helps you to check this if   two variables or the variables they have the same  value or not if they have different value then we   want to draw our ui otherwise we don't want to  draw ui because that could be very expensive   okay so that's why your abstract class that  should extend equitable okay now then we actually   work with states now in our case we'll have three  states so the first one is like data loading state   data loading state so actually we also call it  over here user loading state or user data loading   city it doesn't really matter how you call it and  the second one could be over here say for example   data loaded state okay so over here we'll create a  new state after the data has been loaded okay now   after the data has been loaded in this using this  repository okay so this would be our initial state   and there could be another state so which is  called data error loading state which means that   we were not able to load data from the api so that  means that we have to create three classes and   we already did one and we have to do two more but  we'll do that step by step so this class is called   state so this is what we have seen so here we  trigger state so once again this is not like get   x provider or river part it's very different so  in block you have to create a class for each state   and we'll see how to change the state of this  class so now over here because we are extending   equitable now equitable has a property which  is called get props so you have to override it   because eventually our user loading state is going  to extend equitable so we are going to override it   and then over here we will set it to now so this  means the properties over here they are null   which also means that we are not  going to pass anything to this   class we'll just call this class and as we  call this class we'll change the state okay so   that's the first step we have done and after doing  this we have to go ahead and create events now   once again in block you have to create class for  states you have to also create class for events so over here we created a base class or  abstract class and the class name is user   event and once again it extends equitable and  we are constructed to it for this class now the   way you create states like over here we did the  same way we create events so for each events you   should have each dedicated class and your event  class should extend your base class which is user   event in this case user event eventually extends  equitable so we have to override the properties   now here we also have immutable which means that  after creating these classes we are not going   to change the properties of these classes  the same over here okay so that's why we   tag or use the meta tag which is  called immutable which means that   after creating these classes the properties and  internal things we are not going to change anyway   now back to events so we just created states and  events now we need to find a way to connect them   so we need to find a way to connect this to so  we have to create a new class and in that class   we'll kind of inject states and events together  so let's go ahead and connect them together   using block library and that's called creating  a block so we'll go ahead and create a block   so here we created a new dart class which is  called fblox and inside this will create our block   so here we created our block for the app and this  is called user block you can name it anything and   we are extending block over here now this block  should take the events class and the states class   so remember this is the class that we created  early which is over here user event and this is   the user state class that we created early now  block this block is coming from actually block   library so you have to pass events and  state to it in general that means events   class and state classes and this user block has a  constructor so we need to pass the user repository   why because eventually we are going to call  this class from the ui as we call will pass   this user repository to it and then because we  are extending block over here so we also have to   provide value for the super constructor so you're  assigning the initial value and after that inside   the constructor body we are calling a method which  is called on method now on method itself actually   takes a type of event so what is the event in our  case load user event so this is a name of an event   so you can use this one or you can find this name  or use this name to do something so in this case   we say hey go ahead and emit a state so this  is called user loading state so we'll call   this one and then after that this state would get  called and we'll see that ui has changes so from   our ui actually would be able to call this event  which will call cause this states to be emitted   or the states to be triggered and we'll verify  it very soon and we'll see actually how it works   now to be able to work with this one to be able  to show this state and to be able to trigger   this event from the ui now we need to go ahead and  work on our main dart file here is our my f class   which is a stateless class and inside this we have  this material app and then we have this repository   provider of course this repository provider is  coming from flutterblock as you can see over here   now what is this because we want to load some data  from the server and we want to load them only once   so in our home property we want to inject the user  repository of course you cannot do it directly   you have to use through repository provider which  is coming from our flutter block and as well as   the place where you want to use this repository  like the child you have to mention that in our   case our child is home so what is repository  provider is doing is loading the data from the   server and it does only once okay and then those  data and states they would be available for this   child over here okay all right now after that the  actual magic happens in home class over here but   of course this is a stateless class now as you  come down over here inside this build method   you see that we have block provider now the block  provider is pretty much like uh if you're coming   from uh get x so that is like get dot put  so inside this actually you can inject your   controller or your blocks because we are in block  so we don't say controller in block they call it   block so we created a blocks so we are injecting  our block okay and of course you need to pass   it to this create property and at the same  time we have to pass the context okay now   as we did that we can also load the service inside  this block and because we already injected the   repository early at the top so inside this block  would be able to access them now to be able to   access it first you need to pass the repository  using the context and then we use this cascading   operator over here and then we add an event  what's the event that event name is called load   user event now this is the event that actually i  was talking about now this event refers to this   one but as i said at the same time this event in  our app blocks which is referred on here okay so   it triggers an event and it comes  here okay and as it does it wants to   trigger a state over here as you see now let's  come back over here so yes it triggered the state   so what state it triggers user loading state so  this state is available on the flutter framework   i mean on our app because we are using block now  how it is available and how to check that to be   able to do that here now those state would  be available and this is available using the   variable call state and you can check so you can  just directly compare if the state is user loading   then do something so remember over here we loaded  this event and this event actually eventually   over here imitate this state so that means that  when i'm over here as i'm checking the state is   already there because we have emitted this state  so it should be in the app itself it should be in   the memory and we can check that using this if  condition and as we do that we can do whatever   we want but in this case first we are just showing  a simple widget which is called circular progress   indicator now i'm going to run my app it's  beautiful as you see our app is here loading   and it's loading forever and that also means that  our block is working our app is working with the   block management library one more thing i want  to talk about here like right now it looks like   redundant and in this case we may not pass it so  we can skip this on so we need to come to our app   blocks over here and at the same time we can skip  this section so which looks like redundant and not   useful for this moment so we can just remove  that and we'll see that it still works but at   the same time we need to make a tiny change to it  because uh this section is also redundant in this   case because we are not doing anything so what  i'm going to do i'm going to comment this out and over here i'll put my home class okay now  let's go ahead and reload and we'll see it works   exactly the same nothing changed okay okay  now why we have this repository because we   want to load the data from the very beginning  our app boots up so if you don't have data   loading like that you can just directly go  ahead with block provider okay but because   we want to load the data from the server and  we want to do it only once so we injected it   but even if you don't use this one your basic  understanding to block shouldn't change so anyway   so over here we have this state that is going  on forever so after this state actually we want   to do something what do you want to do so we'll  come over here inside this app blocks actually here we would emit we would trigger  something so simply we could trigger hey after loading it we'll be able to say it hey  you emitted the first state so how do you   stop this state of course we could  do that now to be able to do that   we have to create another state but right now  if you come over here you only see that we have   only one state okay so we can create another  state over here now for this reason we'll just   go ahead and copy this one and let's change  the name of this state so user loaded state   okay so now we have two states so each time  only one state works with this block library   so we'll come to these blocks over here so it will  trigger a new state so in this case we'll emit now we'll see what happens okay so you we emitted  the first state and then we change to another   state and at the same time we have done this  check over here that state is if this is the   loading state then we show the circular progress  indicator but now if we are going to run it   we will see very different result and it just gone  why because first our initial state was that one   and we emitted that and after emitting we  printed this line over here and then we emitted   another new state right but this state  we are not finding it over here okay but   actually we can go ahead and check that if  state is user loaded state and then let's   do something so here we could do simply return a  text widget over here and here we do within center   child and text the second state okay so that's  what we do okay so now let's go ahead and check so   first we'll see this state triggered this widget  and that's gone immediately and then we'll see   this text but i think this will happen  very fast let's go ahead and check it   okay now the loading section was really really  fast okay so it goes away automatically but at   the same time we see that you imitate the  first state and it happened okay because   this state after that we have this  statement so what does it mean it means that   you can do many things between two states okay  so what do you want to do over here actually you   want to load the data okay what's the data the  data that we have in our method which is called   in our repository this one and how to do that  and this is the thing actually we are doing over   here so we are injecting our repository when  the app boot up so let's go back to that one so let's remove that okay and we'll knit this okay  now for now everything else could stay the same   and one thing we need to do we need to pass this  repository over here okay as we are passing it   we need to make changes over here so let's  uncomment this and inside this constructor   we'll just simply go ahead and pass this  one but of course we can't pass it like this   we need to add this okay now the error should be  gone now as we have this object over here actually   we can able to would be able to access the  method okay okay so this is our try catch clause   and over here as you see that we are using  this repository object to get the users   and we save it to a variable now this  user's object should hold all the data   but we want the data to be available to our app  even later so how to do that now for this reason   we need to come to this loaded state over here  and as you see that we have props so inside this   actually we can save the data now how to save it  so over here we'll declare a variable and there   would be list type and inside this the type of  the list would be user model okay because whatever   the data we are retrieving from this repository  eventual uh okay let me see so whatever the data   over here we are saving so we are saving as user  model because eventually this returns over here   user model as you can see okay so  now inside our states over here so   we'll create a variable and we'll call it users  okay now this users actually we also need to   pass over here of course but of course at  the same time you do user loaded state and   we are passing this dot users okay all right  remember user loaded state is a class so from our blocks over here we are passing we are  going to pass this one so we are passing this   user object to this user loaded state as like  we are emitting the state and as you do it it   would come over here and eventually save this  user information in this prop itself now the   benefit of this one that you can access this  one later okay even from anywhere you want   so with this the data would be loaded and  saved in this props that also means that   uh your ui can access that later and we  don't want it anymore now over here we   want to do one more thing if things go  wrong if somehow we can't load the data   so we want to emit another state that would  be error state so here we do user error state and here we'll just simply pass e dot string okay  so you'll convert it to string but if you come   over here in this states you'll see that we don't  have this one so we'll go ahead and create that   so for this one we'll simply go ahead and copy  this and here inside this we'll put user error   state and over here we'll copy this one and change  the name now how about this one of course we are   not sending lists to it we are sending string type  variables so over here we do string and instead of   this one we'll just simply call it error so let's  copy this and change them over here over here okay   now the arrow should be gone now if we take a look  at this blocks over here and i think we need to do   it capital letter and the arrow should be gone  perfect so what's gonna happen over here so from   ui will trigger this event so which will cause  this user loading state this state to be available   and then we'll see our circular progress indicator  at the same time we'll load the data from the   server and as the data is loaded down then we'll  emit a new state that new state will tell the ui   hey that data has been loaded and of course this  state would be available in our ui as well okay so   we can check that how can we check that once again  of course we check it from this block builder okay   and we already did that okay so let's go ahead and  run it one more time and make sure that everything   is okay going smoothly let's go ahead and do that  yes just now we saw the data has been loaded and   then we see it says that the second state but now  this is the time to show the data on the ui okay   as the data has been loaded now over here based  on this state we want to show a new widget and   show the data now to be able to do that first we  need to get the data and how do you get the data   remember using the state actually we can access  the data so you could do state dot users okay and   that's it and we need to save it in a variable  so we'll save it in a list and we'll call the   list type is user model okay and we'll save  it inside and so here we'll name it user list   and after that inside this actually we're going  to remove this and instead of this will return a   list view builder and the list view builder  inside this we have this card now what's   happening over here because we have this state  object it has to do which has to do with this one   and now this saves the users the users  that we have loaded from the repository   and that we save it in a new variable  called user list and because we are   using listviewbuilder so you'd be able to get  the length and access each of them using this   in index so over here we are accessing the  first name last name and circle over so   now let's go ahead and load the data and  show the data on the server on this app so our app is loading data and let's see what's  going on and the loading is done and we see   that it's there so congratulations so you have  successfully loaded data using block from api   of course we can style it a little bit over here now what if things go wrong what's gonna happen  well if things go wrong actually we can do   another check over here so for error check okay  so what we'll do over here we do if state is user   error state in this case what are you going to do  so now here we just simply return another widget   and then we get it could be any random widget  in our case would return a text widget and here   would say error happen now how do you simulate  this error actually we can do it easily so we   need to come to our repository over here now just  simply go ahead and change any of this variable it   doesn't really matter because then it's the wrong  endpoint and in that case we should fall back to this one and as we do it would trigger this user  error states and if it does then over here we   can check it and show this one let's go ahead  and do it so we're trying to load as you see it   couldn't get the data and here it showed error  so that's how you manage the state regardless   you fetch data or other things you do so all you  need to do you need to find a way in your blocks   to trigger the states and as you do that they're  available in your ui hopefully it makes sense   now we'll come over here come over here and  change it back and we'll load our app and we see   the data is here okay great now the  rest part is actually pretty easy so here is our digital screen and over  here all we're doing passing the user model   and access the underlying properties  using the dot operator and so we access each of the user information from  this user list using this index okay and that   becomes a user model okay of course i think we  have to have this semicolon over here now let's   load our app one more time it's  loading and loading information   click on them so we see each user go  back and click again and we see user   yeah so that's how you work with  the block to get data from api

Channel: dbestech

Views: 44,426

Keywords: flutter bloc pattern, flutter tutorial, flutter, flutter http request bloc, flutter bloc http request, flutter bloc example, flutter bloc fetch api, flutter bloc restful api, flutter bloc api call, flutter bloc api call example, flutter bloc pattern tutorial from scratch, flutter bloc pattern explained, flutter bloc, flutter bloc and cubit tutorial, flutter bloc listener, flutter bloc pattern 8, flutter bloc pattern example, flutter bloc pattern api call

Id: CjCTNPKhgXc

Length: 30min 39sec (1839 seconds)

Published: Tue Aug 16 2022