7 Steps for BLOC pattern code in flutter

hey there everyone at a shear and welcome to another exciting video of our blog section in the flutter so now the next target is to create this employee block just to give you a quick reminder we have done with the main file we haven't touched our homepage file but we have also done our employed art now this can be your contact employee new user student whatever you like to have this is gonna go inside that now here we have got employee blog toward art and as you can notice I have got few - dues for us now the block pattern is a relatively simple as compared to others such state management stuff but it has got a list that you have to do best part is something known as stream controller which is already cooked in already into the flutter and that helps us a lot but there are certain steps that you always have to take care so these seven ones are 1 2 3 4 5 6 7 yes they are 7 so these 7 steps are gonna be applied in any block application that you have to write regardless of how big it is or how small it is these are always gonna be followed up here so let's go and follow one by one two do's and we're gonna just write this according to this one so you can saved it somewhere so that you can reference it later as well now one big thing this video is definitely going to be a little bit longer so you might want to grab your popcorn or your iced tea whatever suits here ok so the first to do says hey do your imports make sense so let's go ahead and do our import now in the block thing we definitely need something known as a sink because a lot of things happens are synchronously and the next thing that we need is going to be our class on which this entire thing is dependent in this case the employee class so I'm gonna say hey give me this employee Dart ok so first to do is done and it was relatively simple now we need a list of employees ok so sometimes you want to invoke the things as we go sometimes you want to get things hard-coded however you want to go this also needs to be done so we're gonna create an class that's gonna say emplo hee block there we go ok inside this we're gonna create a list of employees ok so how we're gonna do that first and foremost we're gonna tell it's a list not a list of string or in teacher but a rather a list of employee type okay make sense and we're gonna call this as underscore employee AMP there we go Employee List let's call it that way and it's gonna be an empty list right now okay now what we'll be doing next step is to invoke with a couple of objects that are gonna be created from the employee class so let's go ahead and do that so we're gonna say employee the second one it requires you to pass on ID name and travel tree I'm gonna give it an ID of one the name is gonna be I'm gonna just call it as employee one so that it's much more easier for us to understand shortly you can put up name here and for the salary we're gonna provide a double value let's go for ten thousand thousand ten thousand dot zero okay for a comma and we're gonna create a couple of ones of them so we're gonna press command shift D if you're in the windows control shift D is your friend so we're gonna replace this one with two because it's employee - let's change that as well there we go - there we go and command shift D again because this time it's gonna be three oops and command shift D again this one is gonna be for command shift D I promise this is the last one five definitely we need to change the IDs and the salaries as well so to is fine then we need to change four three so we're gonna just do go ahead three and nope this one needs to be four oops come on I can just do this and this one is four there we go and the last one is five with 50,000 so we're gonna say just five it looks a little bit odd yeah because three is longer okay anyways we can just remove the last comma here and there we go all looks good so the next step is list of employee which is all done now comes the interesting one which is stream controller so consider the stream controller as just a class which has a couple of methods like sync and stream and all these stuffs so just to make sure that you understand it better I'm going to write a couple of comments for you so that you can take advantage of that so there we go so first one is we've already discussed that in the theory but just a quick walk so sync is a thing to add in pipe okay and then after that we have got stream to get data from pipe pipe here Vika and simply just to add further more and I'm gonna say buy pipe come on by pipe I mean data flow here okay and data flow you can call that as a stream as well so here is a quick note sink to add in stream to get data and that's it so moving on to our next to do which is define all of your stream controller now stream controller is gonna be defined for everything when we are creating a new object or we are doing any functionality for that because for performing any function we have to send in some data and then we're gonna get some data back so for that we have to do that it's pretty easy to do that because it's a class we have to just create object from this class so let's go ahead and do that we're gonna do that final and we're gonna call this as employee a first of all list stream list stream controller come on there we go so this is our list stream controller and this is gonna be created using stream controller there we go but this is not gonna be any stream controller rather it's gonna expect a special type of things to be passed on and what that is it's a list and that list is not holding any ordinary object like string or integer rather it's holding up something known as employee there we go so this is our first one done all good all nice it's not being used at we are gonna do that so this is a restraint controller for list employees but we need another one which is gonna be for increment and decrement as well so how we're gonna do that we're going to say final and we're gonna say underscore employee and this one is for salary increase salary increment and constrain controller I know these are pretty much big name but you always want to give them big name there we go so this one is gonna be for employee increment stream controller so let's go ahead and do that again it's exactly same stream controller stream come on kin controller so that's the one we are looking for now again you always want to mention what kind of data is going to be coming up so in this case in the stream controller when we are incrementing this we don't want to pass on entire list of employees rather just an object which is employee so we're gonna go ahead and do that there we go so this one is all good now we want to make a duplicate for the DIC rement there we go so we have created a control stream whenever we want to create any list of employees or maybe you want to do any increment or decrement in that so bottom one is gonna go for DIC rement so we're gonna say decrement employee salary decrement stream controller it's also gonna be a stream controller and it's gonna expect an employee object okay looks pretty good pretty rock-solid I think that's all good now let's move ahead so we have got a stream controller for that now we need to create stream sink getters so we have to create a getter for all of them let's go ahead and do that okay so we're gonna say getters okay now the Gators can be little bit little bit tricky for some of you so we're gonna reference it back and then we're gonna compare it what general Gators looks like and what a Gators look like in a block so we're gonna say let's move into employee and we see this Gator so first and foremost we have a datatype then a get and then whatever we want to set it Gator form okay make sense make sense so how we're gonna do that here for this Gators and this Gator first and foremost the data type in this Gator is gonna be a stream okay the stream is gonna be responsible for handling the list the list is containing the data of employee okay so this is our data type definitely longer one but we do have it then we provide a keyword of get okay and then we simply say for width for what purpose or what thing you want to return or what object you want to have so in this case we're gonna say employee list stream okay and what do you want to return in this case we are gonna return something known as let's go back this is the one that I want to return okay so this is a gator for that and not only this one we're gonna get a stream from that and notice there is a default object that comes up as a stream so what we're doing is we're creating an object from stream controller and we are trying to control its stream and sink now since we have got this Employee List a stream definitely that means there can trolling input we want to control output as well so we have to define that remember I told you that sync is to add data stream is to get data so we have done for the stream now we want for sync now surprising a little bit sync is not called it directly sync but it's called as stream sync a little bit odd but that's the only or odd part here and again it expects you to have a list and this expects you to have employee again exactly same thing we are gonna have a getter so add a gate and then we are gonna say employee list and we're gonna call it sync we have not gonna call it as stream sync it would be confusing and then what you want to return we want to return exactly same things so we're gonna go up here because this is what is controlling the input and output we're gonna paste that and this time instead of the stream we are gonna look for sync okay so there we go we have got to get us here for inputting the data and outputting the data as well but there's one more thing we need getters for increment and decrement of values as well and of course we are gonna need just a sink for that okay so how we're gonna do that so we're gonna simply say stream sync there we go again this time it's not expected to have a list just rather an employee we're gonna create a ket keyword here which is gonna be get we're gonna call this as emplo ye salary increase ment that's too much of a long name but yeah okay and what its gonna do it's gonna get a controller again we have created this guy so we need a getter for this again just exactly what we have done in the past just put a dot and have a sink okay and of course we're gonna repeat this one more time because this is for increment we need now for decrement so there we go and this one is gonna be salary d3 meant decrement and this time we need for this guy so we're gonna copy that and we're gonna paste that here there we go so this time it's for decrement so we have a full control over the Gator so these four lines are just a simple regular ordinary getters but this time they are powered by stream sink and regular stream okay so this is all good now let's go back and see what are the other things that we have to do now after that we have to create a constructor add data and listen to the changes quite a lot of tasks but trust me it's much more easier so let's go up here so how do we create a constructor we create a constructor by naming that exactly same so we're gonna say employee block and there we go so this is our constructor now inside the constructor you can do whatever you like maybe you want to initialize the data as soon as the application loads up maybe you want user to allow to create and call this as many times so however you want to craft your application so what we're gonna do is we're gonna call this employee list stream controller I want to call this this guy employer stream controller so I'm gonna copy this I'm gonna come up here so this is my main and since we are having an airway or a list we can have access to the property known as ad so let's just use that I of course by dot there we come and in this we want to pass on this entire list here now surely we can allow the user to create as many objects as he wants on the go definitely we have to add a floating button and I have to call this method define a new method here but right now we just want to do on the method which are all the objects that are hard-coded okay so now this is all good so this is the first thing that we have done that is constructor and add data so we have added the data again a side bar if you want that user if you allow want to allow to user to click on something a button click or something you surely can do that we have taken enough care in the entire course that we surely are capable of doing that now to listen to the changes that's something new here so how do we listen on to any changes that are happening so in order to have the access of this we have simplified things in this stream so how we can do that first and foremost call your getter so this is the one we're going to copy that and this is our getter okay now in this increment celery stream controller we definitely have an access to stream and this stream further again listen okay so what's going to listen on it going to listen on a method now surely you can define a method just like this here but I don't recommend that instead what we really want to do is create a new method so what is going to be this method we're gonna call this as underscore increment salary now this method is going to be responsible for making any change in the data and whenever you want to change anything into the data this always and always should go through here so that's why it always keep on listening them okay so that's one thing we have done now called the Gator for another one which is decrement so okay so where is that this is the one so we're gonna call this one here the stream controller and we are gonna look for decrement event as well dot stream which is going to listen to another method which is gonna be degree meant salary there we go okay now okay this is all done we have done it now the next to do say is core functions so remember we are doing it in reverse order we definitely could have made this method firt but again first and foremost is to add a listener and then we have to create these cold functionalities so we're gonna go out of it and what I'll do is I'll copy this one first there we go and what we will be doing further is at this method there we go this method always expect to have employee being passed on and remember we have actually decided it here so whenever a stream controller this guy is gonna be used it expects that in a stream controller employee will be passed on so data type is being passed on and we're gonna call this as employee now we have to do exact same thing so we're gonna press command shift D but instead of increment salary we have to work on decrement salary which also expects you to have this object now all we have to do is define our method that what you really want to do when these things happen so I want to do simple stuff I'm gonna simply say there is available known as salary and this salary is gonna be filled up by accessing the employee property which is salary remember we created that up here at the top the salary so we're gonna access that how to do that pretty simple we're gonna take this object employee and access the salary makes sense now how you want to increase that I want to increase that by creating a new variable I'm gonna call this as incremented come on increment Ted salary and that's gonna be taking up our core salary and it's going to multiply it by 2500 that means a 20% increase okay make sense now the final salary is gonna be definitely needs to be updated in the class object itself so how we're gonna do that we're gonna call this employee list in this we want to access the object so how we can do that we can call the ID of it this employee dot ID now since ID that we have started here actually starts from one so we need to subtract it one because it's an array so we're gonna do that now and then we're gonna access a property which is salary which is going to be updated by the base salary plus the incremented one come on incremented salary there become you have got your increment in the salary pretty easy stuff but not done we have just updated it we need to definitely want to add it to the sink as well so what we're gonna do is we're gonna create an Employee List sink and then we are gonna just use a property of add and then in this we want to add employee less employee list okay so there we go this always needs to be mentioned because otherwise what you are doing here the listen thing is not going to work so definitely you want to use this employee list sink and want to add up here so this is all good and this looks all good now we need to define exactly same thing for the decrement as well so definitely we can just copy this all code and we can use it for decrement logic as well again we're gonna just change that decremented to make more sense so we're gonna say decremented salary and this decremented salary needs to go up here as well instead of the plus we're gonna do a minus and the rest of the thing looks pretty okay looks pretty okay so we have got two methods which are responsible for incrementing and decrementing of the salary we are listening on to these events as well and we have created all the getters as well as all the streams as well quite a too much of the work but yeah I do agree so now the core functionality is good now comes the last but not the least is the dispose so what does this dispose means it's simply calling up all the stream and free up the resources because remember whenever you are calling a stream you are busying a few resources and you probably want to free them up so we're gonna call this up here so we're gonna create a method void and it's very important that you mention it as disposed surely you can name it anything you like but it's a very good idea to call it as a dispose because dispose is also a default method whenever you use call use these streams and we might want to call this dispose method in the home page as well and we are gonna just override it so we need to free up all the resources so first and foremost we're gonna call this celery increment maybe employee salary increment stream controller of quite a long name and we're gonna just have a close then we need to close up employee list stream decrement we need to close this stream as well remember for all the streams that you have opened up you need to close them up so you can always go up and look here so remember we are having three increment decrement and one stream is opened up for controller so you might want to call this as well remember how many are here you want to close all of them so just one is remaining and it doesn't matter if you close first one second one mid they just all need to be closed that's all the co-lead here is okay there we go so we have got this method already and again I would like to separate them out one more time first and foremost we did the import statement then we created these object surely we can instead of this we can add a method that user can add it whenever it likes and we can just ask him to provide these values again remember sink is to add in the pipe stream is to get data from the pipe and then we created we worked on this block of code which is opening up a stream controller for whatever the things you want to have after that we created a getter and get her for everything in this case we have four of them again the all the things that you want to do all the actions there we're going to have a getter for them optionally of course and then have gotta get her for sink and stream as well okay so then we worked on this part of the block of the code so there we go this is another separate part and then we created a constructor for employee block and this constructor helped us to actually add all the things the Employee List at once and then we are listening the stream on these methods to it anything that changes out in these method we are all the time listening to them and whenever there is a change we might want to show up these change so it's kind of a listener who keeps on if you have worked on the firebase anytime we have a listener there as well who all the time keeps on listening for any change they are exactly like that and then we have got these actual method these are your logical actual logical component rest of them are just listening and fetching the data and this one is also and finally whatever the streams we have actually reserved we might want to free them up so again just never look this code file as just once all the time always look them in the segmented again these two dues are gonna help you like super super helpful so that's it for this one we have created the employee block class now the only thing that's remaining is work on the home page and work a little bit on our UI part let's go ahead and do that next [Music]

Channel: Hitesh Choudhary

Views: 34,786

Keywords: Programming, LearnCodeOnline, machine learning, flutter tuturoals, flutter app development, flutter BLOC, BLOC in flutter

Id: cdl-41gUcGY

Length: 21min 18sec (1278 seconds)

Published: Wed May 08 2019