 Hello guys in this video. We are going to see how to implement the qubit So in the last video you have seen we have discussed these packages block and Flutter block so I already told block is a way to implement the business logic pattern and If you want to work with a flutter underscore block That is providing flutter widgets that make it easy to implement the block So basically this package is going to provide us the widgets that we have already discussed like if you scroll down You can see they have listed the examples here so like block provider Multi-block listener block listener all these widgets are provided by this packet. So we need to use this package So let's go to the sample app first that we are going to implement So here it is. I just reloaded. So I just have simple created a model page Repository so this repository is hitting this URL in order to fetch the list of users So we have implemented it with the help of set state So just we are Using this loading flag. So we are doing what on init We are calling the API and waiting for the response once we got the response We are setting the state that is loading has been done. So it is false In the build if you take a look We are checking if it is loading then simply display the loader. Otherwise display the list view with whatever data we have received So let's convert it into qubit. So once you learn about qubit, it would be very easy to understand block So let's take a look on qubit. So for that first of all, I will add this package Let's go here and save it So meanwhile it is saved. So in order to work with qubit, let's create a separate folder for qubit So here we will keep all our qubits. Okay, so let me just restart So if you can recall in the last video, we have discussed that qubit is having states Only there are no events. So let's create couple of files inside qubit. The first one is qubit underscore users underscore states dot So we'll create some states based on that we will be displaying the data second we will create the qubit users underscore qubit dot dot So before going to this qubit, we need to create a couple of states here So what we do is we generally create a abstract class so that we can pass the generalized state and From that reference we can specify what type of state it is fine So let's create a class and saying qubit user state Or you can say states fine So now you have to create states So let's create some states here. Let's say class qubit users loading So this states may vary depending on your requirement. So I am going with a simple example. Let's extend this Okay So one state we have created this loading same way we can create one more state This one I will say loaded and once The data is loaded. What we need we need to display the list of users So this type of thing we need. Okay, so go back here and specify the same over here and let's import this and here We need to create a constructor so that we can pass this values over here. So let's see who's required this start users Okay, so for simplicity, I have created two states only and it is recommended to create a Journalize abstract class that we can pass to the qubit Okay, so this states part is over from my side. Let's save it and Go back to qubit. So let's create here class Users qubit and in order to create a qubit, you need to extend qubit Okay, so there is by default class qubit Which is again coming from this letter block. So this letter block provides us The widgets as well as block package both so this is coming here and Here we need to specify the type of qubit So for the type we need to provide states So now we can have multiple states. That is why we need this Journalize state so that later on we can identify what type of state it is so let me just import this and I just want to do one thing So here it is inside the same packet same folder Yeah, fine So once you do this it is going to give you some sort of error It is saying we need to call super So let's do this and this gonna do what this gonna call the super class constructor So before that, let me do one more thing first of all here We will be writing the code that is doing to get data from the repository Okay, so let's do what first of all create one final Users repo And we'll say Users repo is equal to users repo. So I just Correct this thing Okay, so this is fine. We will be using it in order to fetch all the users second is we have this constructor and here What we can do is we are doing this So we need to do what? Let's create one matter first of all in order to get data Okay So for this let's create a method So this gonna be a sink because that is going to do API call and this gonna create what a list of Users that is users model and say users is equal to await for Let's use the user repo Dot get users fine So this is gonna give list of users that we have assigned to this users very Now once your task is done, you need to do what you need to omit the state So how do you do so? What that there is a function omit and Here you need to pass the state Now which state you need to pass? We need to pass once we receive the data. That means this is Cupid user loaded state Okay, so simply say QB user loaded state And it is expecting the list of users if you go here and you can see it is expecting List of users which we have already received in the cerebral and you can simply pass it So that is all for this But this Function you need to call it So what we want once a qubit is created It sells call this function both that what we can do we can just create a constructor over here Which is already there. Let's create the body part for this and Change something so here we need to do super call what we can do instead of writing this way We can just empty this and say colon super and here We can do what simply pass the initial state that is you bet loading Okay Fine and here we can do what just get this data Okay, so first time we have created this state that is loading where we are not doing anything Okay, so once it is there Then we are calling this get data. So once this data is received. We are emitting second state that is loaded state fine This is how we implement the logic. So let me just Write like this. This is how we implement the logic in qubit. We have created a function We have called it in the constructor. So it depends on your requirement. This is just a simple example So I have taken a simple example Now your states are fine. Your qubit is ready You just have to implement it on your page that how we can use it. So let's go to home page So before going to home page, you need to create the qubit as well Okay, this is just the logic that how the qubit would be created But we have not created any instance of it and it is not passed to the widget tree So for that we have to go to the main So here on your home page What we are doing? We are passing this instead of passing this we need to change this Here we need to write block Provider, okay. So once you will write block provider Let me just add comma it is having one create property Okay, so this create property gonna create the qubit or block for you. So first of all this will take one Function with context and it gonna return you either a block or a qubit So we have created the qubit. So that is user Users qubit we can pass it over here fine This is how we can create it now we have to pass the child as well because this home page otherwise will not work so let's do what cut it from here and Inside this provider simply write child and pass this home page Now this qubit is created and passed to this widget Save it Just come back to home page. Now here. We don't need this Stateful widget. So what to do is let's delete all these things We don't need all these things over here and We don't need this init state and Let's try to now Remove all these things and we can also remove this So what I can do is Let's delete this thing What is wrong here? It should be state less widget. Well, that is why we are facing problem. Okay, fine Save this. We don't need this repository first of all and We may need it Okay, let's remove this. We will take it later on Now let's come to the logic here. So here in this body what we need to do In the main we have provided that qubit now here. We need to assess that So for that we can use block builder Okay So block builder is expecting one builder So builder is again a function which is taking context as well as state Okay, and here we need to return the widgets So what we will do over here based on the state we will return a widget for example if this state is the state this is coming is What are the states we have created? This loading state that is qubit user loading. Let me just import it like this If this is loading state, then we have to do what then simply return the loader that is center and Your child would be circular progress indicator. Let's add the const here Okay, this is how we do once it is done That is fine If it is not this state, then we have to do what we have to check for one more thing if your state is qubit users loader If the state is user loader, then do what we need to return this list view Fine Let's do what now once you are Assessing this state you can see in the state. We already have list of users So what to do just go back here and here instead of writing users. We will say state dot users Fine from this state that is qubit loaded. We can simply assess this list of users So go back here and just change this That is state dot users that is state dot users, sorry Fine This is done now this should be a return fine and Once the padding is done instead of writing comma just put this semicolon Okay. Now what else we have left with? Okay So in better we have used if else if Now it might happen none of this condition satisfied Which is as of now will not be happening but still as per logic they want it might Not complete normally Fine, so what we can do instead of using this as if we can use one more as after this and here We can return anything. Let's say return Center and simply say child and simply say text and say Something went Wrong, so which is not going to happen any time Let me add a course here So with this we have done Let's try to restart it and Are we missing something and what is wrong with this? Let me just stop it and run it again Let me check this. Okay. What is wrong happened? We missed something. Let me just go check Provider not found exception Let me cross-check it. We missed one thing that is here. We need to mention this Users qubit. Okay. So only then it's gonna provide that particular type of qubit To the widget tree Let me just stop it and run it again. Okay again. We have a problem. Let's run this And see what it is saying Okay, I missed something We missed one more thing over here here whenever we are passing the builder We also need to specify a couple of things so the first thing would be your block that is Qubit Qubit users what it is Okay, let me just cross-check. What is the name of this? Users Qubit go back here and Mention this and you need to import this as well and the second thing is the state The state we have already created that is Here, so we will pass this generalized one Okay, so that is all Now we can restart it should work. So here you go. You can see now. It is working perfectly. Okay Why just restarted again, that's why So I think this is clear. We just have created states then we have created a Qubit which is Expecting one state while extending the Qubit and here we just created the repository so that we can get data from that repository and Initially we passes this loading state and later on we call this so meanwhile the data was coming this state should work that is the loader is going on and Once the data is loaded here. We are meeting the loader state So loader state we are passing this users variable which is holding the list of users, okay, and on UI side What we are doing in the block builder? You must have to specify the block or Qubit and along with that you have to specify the state Here we are checking if the state is Qubit users loading state then simply return a loader If the state is loaded state, we can simply display the list of users Otherwise, you can simply say something went wrong So most of the time these two scenarios will work. This will hardly work Okay, and don't forget to do what on your main Don't forget to add block provider and specify what Qubit or block you are going to provide to its child widget tree and Don't forget to use this create where it is taking one function with a context and this gonna give you instance of Qubit or block. So here we are working with Qubit That's why it is Qubit in the next video I will use the same example in order to display the block So let me delete this unnecessary code that is default boilerplate Okay, 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