 Hello guys, in this video we are going to see how to implement multi block provider. So for this example I have taken two list of products, one is jewelry, second is electronics. So both products are coming from the API. So I have this repository over here and I have this model and I have this homepage. So currently this code is implemented with set state. Now I will convert it into block pattern so that we can use multiple blocks. So for that if you are looking for starter code you can check out the link in the description and let's start by adding the dependency first. Under this we can paste it and save it. So meanwhile it is fetching right click on your source and create a new folder for blocks and let's create a new block. So we will give it a name, electronic block and expand it and let's quickly rename it electronic underscore block. Okay so same way we can add one more block. The second one is for jewelry. So let's say jewelry underscore block. Let's quickly rename it as well. So first of all we will write code into block. Let's go to the electronic block state first. So we will create some events first. Let's do what let's remove and keep it simple. We need a class so we need to add a couple of events. So we will add two events. The first one would be electronic initial event, so I just named event in the end so that you can easily identify and just extend this class or you can make it abstract class as well fine. Now the second event I need to add is once your data has been loaded so what we need we need initial event and get data event you can say or say get event fine. So electronics get event and this same way I just copy this classes and go here inside this events of jewelry block and we will use the same thing over here. So just change this electronics to jewelry in its state and here and instead of electronics jewelry fine. So for both kind of data we are using same model so I don't need to create separate models. Okay so we are done with adding events in both blocks. Now next we are going to add state. Go here for electronic state let's write here abstract class and here we will add a couple of states the first one would be initial state. So let's keep it initial and the second one is let's say electronics block loaded state just add state here so that you can identify that this is a state fine. So once your data is loaded we need this list of data that is coming from the API so I will create one final let's say list of product model and we will say electronic electronics data not date it's data and we can just add it in the constructor the required argument done. So same way we can copy this save it and we will go to this state of jewelry block and I will write it over here. So we just need to replace this electronics with this jewelry jewelry jewelry and instead of saying electronics data we will say jewelry data and here jewelry data so it is not coming let me first rename this and now it should come and this we need to import and this one is doing what okay so let's delete this so we have done with the state of jewelry we have done with the state of this electronics right so let's start go here that's fine so let's close this both state and events now we need to work on the blocks part so on block part what we need let me just remove this and we will import it again go here import this let me go here okay so basically this we need to change to state initial state okay so same way we have this problem over here we can remove this and here we need to import this block and here instead of writing this we will write state as save it save it now we need to write the code over here so what we want here so here just we want to do what we want to get the list of electronic data so what to do is first of all we need to add the repository over here let's add final and with this repo we can go here and right here this dot get electronics okay so this gonna give what list of products model that means we need something that that is list of product model that is electronics data is equal to let me correct it and this is coming from API so write await here and this should be a sink and we need to import this okay so now once you receive your data you can emit the loaded state to simply say electronics which state loaded state and we need to pass this data fine so this is done now this is in case of any event occurred then it should get the list of this and then it will emit this so we need to add one event that is let's say electronics initial event so that it can detect this and this on should be executor getting the list and then emitting this another state fine so with this we have done with a code of electronics block so here we need to remove one extra block let me remove do not make sense to add multiple block block and now same way we can do what we can just copy this code let's do this go to this jewelry block and we can do the same thing over here let me do it here and go back here let's copy this product wrapper as well go here paste it import this and we need to make it a sink so whenever you copy and pasting so don't forget to rename everything so instead of saying electronics block loaded state we have to say jewelry block loaded state and you have to pass jewelry data so that means we can do what jewelry data over here then we can pass that jewelry data over here and don't forget to change this function so get jewelry fine and here as well change to jewelry initial event so just cross check it again jewelry jewelry jewelry jewelry jewelry jewelry block jewelry data jewelry is fine so everything is fine so we named everything to jewelry so with this we have done with the blocks part now we need to do what we need to inject it in your route so here we used to write block provider now in this scenario we have more than one block so what we are going to use we are going to use multi block provider so let's use it multi block provider so first of all I just paste the child as it is now here provider is what provider is just a list of providers so let's create one array come down here and in array here you can pass n number of block providers so let's do one by one block provider and on create so what we need to do we need to call that function with a context and simply say electronics block this is how we can create one block provider so here we don't need any child as the child is already mentioned common over here inside multi block provider so let's copy this and paste it and instead of writing electronics let's use jewelry block so with this we have injected two blocks into the root and now you can use that two blocks inside the child component fine so let me just stop this and rerun it because we have injected it let's run it and then we will continue the code on homepage okay so let's go to homepage and try to use the block what we need we don't need all these things let's convert it into stateless don't need this and we can remove these things so we don't need this loading we don't need this wrap-up so we don't need this list and we don't need all this functions let's remove these we don't need this as well fine now what else we need just go down here so here whatever we are writing first of all we don't need this let's remove this cut this part as well because I will need it cut this remove this and now we need to cut this as well and here we will be using block builder because we have to build it again and again fine and what we need we need a builder so let's do what let's use this and here we will add conditions but before writing the builder we need one more property that is block so how do you get the block we have block provider class use it dot of context so here you can specify what type of block you want so this one is for jewelry so we will be using jewelry block let me just remove this block so we forget to remove one extra block over here let me delete this leave this come back over here okay now here we need to add the conditions so first of all if your state is jewelry so we have two states initial state and loader state if it is initial state then we have to return that center widget remember that I copied return just paste it this one and semicolon otherwise we will check one more condition if your state is jewelry loaded that means you have received your data now you can return but you can return that line get UI and here you need to pass you already and how do you get from state you can get it easily okay so are we getting okay so let's add semicolon over here as we are returning and the last condition for else which will never be executed you can simply return something like const that's return and simply say text and simply say something went wrong okay let's do what let me go there so with this we have done this part and you can copy the same and paste the same over here as well before pasting let me go down so we need to call this one let's cut it and paste it over here and instead of writing this we need to write state dot jewelry data we are writing for electronics data let's keep it electronics data and quickly change this block to electronics block and this one would be let me just copy this electronics electronics block initial state and then electronics block loaded state and here instead of getting this we will be getting electronics data and instead of writing comma use semicolon okay so I think all done and we missed one thing we forward to rename this block over here so we just save it I think everything is done yep so let's stop it and quickly run it everything should be fine let me remove this extra imports as we are not using let me remove these two and import it with proper syntax this way and the second one is just save this and just learn it okay with this you can see your data is coming so once it is received the loader removed and you can see the list of products is coming so that is all for this video we have already seen how to implement this multi block provider fine so that is all for this video if you have any doubt do comment in the comment section otherwise like share and subscribe thank you