 Hello guys in this video. We are going to see how to implement the calculator app using block pattern for simplicity I have already created a set state application for calculator. Just take a look You can add subtract multiply and divide So same thing we are going to implement with the help of block pattern and I have already added the starter code in the description So let's take a look on the code first So here on your home page. We have added this controllers and we kept One result to display the result and what we have done We just have added the text fields and added the controllers and on the click of buttons We are just calling this calculator rapport ad. So in calculator rapport We have added some functions like add subtract multiply and divide So let's move to the block now. So first of all, let's add the dependency copy this Paste it and save it Okay, so now first of all, let's create the blocks. So in order to create blocks I have added one extension that is blog Fine, that's one. So if you want you can use this or if you want to go ahead with the scratch You can go that as well. So I just show you how we can use this. So simply inside the source I will create a folder blocks and I will right click and you can see block new If you click on this, it's gonna ask the name of the block. Let's say Calculator And if you just expand it and you can see you have this calculator block and you can even rename this to Calculator block Fine, so it has created three files for us. That is the block event and state So what we can do for simplicity if you're going with a scratch. We don't need any sealed class Let's remove this and keep it simple Fine, if you want you can make it extract class as well and just come here now first of all We need to create couple of states. The first state is let's say this Calculator initial state and the second state I would create Calculator, let's say result and Once we are getting the state. We need the result as well So in order to get the result, I will create one variable final num Result and let's do this Pass it in the constructor as well required This start result fine. So with this we have done with the states part Now let's move to event Now here we need to again Remove this and we can just make it Extract class so that we can follow from the scratch as well Save this now here. I need to create events So what are the different events we can add? So let's create a class We can have different events based on the click of these buttons. So let's say class add event Which is extending calculator event and Whenever this event is executed, we are expecting two values from user fine So let's say final num and say num one and same way I will do Num two as these are final. Let's add the constructor with required So with this we have done with one event and the same way we can add other events as well. Let's say some correct event and You just need to change this Same way we need Rest of the events Multiply first and this one divide Okay, so with this we have created four different events in order to handle the click of these four buttons fine Now we left with this block pipe So here what we can do we can remove these two things and Just import this block and you can see this extension has already created these boilerplate code Fine. So here we already have the on so here we can write your code Now in the last example, there was nothing more than one event Okay, so we were only meeting one event. That's why there was no condition used But here we have multiple events like add subtract multiply and divide So what we will do over here here? I will add my logic if My event so based on the events. I will be taking some decision if my event is add event So that means we need to perform addition path So how do you do so for addition? We need to use this repository because all the methods are Here, so let's go back here and let's create one final Calculator repo Calculator repo is Equal to calculator Okay, I just need to import this Go here and bought this Now here we can do what we need to call the add method of this calculator repo. Let's do this And here we need to pass two things that is number one and number two And if you observe carefully in events, we were expecting numbers that is number one and number two So that means now we can assess that things over here from the event So event dot number Even dot number So this gonna give us what this gonna give us a result back. So let's say Num result Is equal to this Okay, so now we got the result. What next? So result is received now we can omit the state. So which state we need to meet now? Calculator result. Okay, so just go back here and simply say emit Calculator result and it is expecting one result as we have already defined over here So now we have already received the result by calling this add. So that result is passed over here Very simple. So this is how we have to implement rest of the cases. So if it is Subtract event then we have to do what? Subtract Fine same way else if the event is Multiply Then we have to do what? multiply same way else if the event is Divide event then we have to do what? Divide So with this we have completed this block Section as well Fine now we left with using it Okay, so first of all, let's go to this main and Here we need to wrap this home page Into your block provider. So let's say block provider and On create we need to pass one function and we need to return that calculator block and The second argument we need is child where we can pass this home page So this is all for this main let's come back to the home page and We left with this page only So first of all what I will do I will just remove this state full widget and we can convert it into state less widget, okay state less widget and we don't need This and this let's leave it Okay, fine. So here we are getting some error and Let's remove this result as well as we don't need it and Let's remove this Fine Okay, now what else we need we don't need any repository here okay Now what we need to do we need to add the events based on the button click fine so first of all we need to get the instance of Block so that we can add the events Okay, so how do you do so? So there is a let's write here final Calculator block. So how do you get that calculator block from here? So we have injected this Let's remove this constant. We have injected this over here in the widget, right? So we need to get it on That side. So here, how do you assess it? There is a class block provider Dot we have a method of and it takes context and This gonna give you one instance back So we need what type of instance from the context we need to specify here. We need calculator block So this gonna give you that injected instance of block over here Okay Now this we need to use on Here on the click of add. Let's remove this and simply say calculator block dot add So which event we need to add? Which even add event? So here we already have num1 and num2. That's fine. So just same way we need to write this code everywhere Change it and this one should be correct point and Next we have this Multiplied next we have Divide Okay, so with this we have added events on the click of button just with a single statement Now the last thing so in the last example if you have seen I have added the whole content of body in The block builder But here we don't want to rebuild everything. We just want to rebuild this result part fine So that means I will just rebuild this part So let's cut it from here and simply write block builder and Here we need to pass the builder. Let's take and Here now what we need to return so we can have the result to zero zero or we can have The actual result so we can do what we can check for the states over here. So if my state Is so what are the different states we have created? Let's take a look again So calculator initial and calculator result. So let's go back here. So if the state is Calculator result so that means we have received the result So we can just return the code we were doing return this text and This result would be coming now. Not directly. It would be coming from this state variable Okay state dot result because in this we have already created this result fine Come back here. Now. This is one scenario in case. This is not matched. You can simply display anything Let's return Sorry, I just copy this and I will say something went wrong and Let's add the counts here We need to return it as well and let's remove this and you can even make it in red color Save this now. We have injected it. So let's stop this and rerun it Let's wait. Let's remove this meanwhile and we can just Remove this Save so let's see what we are getting any error So we missed one thing I think Let me just show you the error So this happens most of the time. So that's why I try from my side Whatever feasible errors I can show so I will show it is saying the following provider not found exception you got So that means we are not getting this provider. Basically The provider is not providing exactly. So what we missed in the last We are we are doing what we are using this builder, but we are not providing any block so for that just use block and simply use Calculator block fine save it Stop it and I just rerun it. Okay. So here you go. Let's type something and Use three Let's add You can see that is how it is coming Okay, so this is the mistake most of the time people does that's why I just shown the same So that is all for this video if you have any doubt to comment in the comment section Otherwise like share and subscribe. I have already added the code in the description for your reference That is all. Thank you