Flutter BLoC Library Tutorial - Simple BLoC Pattern Solution

having a structured codebase can only help you with creating good and long-lasting apps the problem is that proper architecture can come with the cost of writing a lot of boilerplate code especially if you intend to write everything from scratch when it comes to the block parent for flutter in the previous tutorial you could see how to create blocks from scratch and I would say it's not something you want to be doing over and over again it's just too low-level and also if you don't know how to implement blocks from scratch or if you haven't seen that previous tutorial definitely check it out by clicking on the card in the corner we simply need to move up the abstraction ladders so that we aren't going to be dealing with streams and things directly this can be done with a handy library about which you are going to learn in this tutorial hello welcome to resew coders so just as in the previous tutorial about block pattern where we implemented everything from scratch we are gonna be building the same simple app which is just an iteration on the default flower app when you create new projects so I have a new project open and this is also how the app will look once we finish this simple app at the end of this tutorial so we can increment and decrement also so it's pretty much the same it's exactly the same as in the previous from scratch tutorial the only difference is that this time we are gonna be using the block library this is the library that we are gonna be using it's flower block you can find it over at pub.dartlang.org just search for flower block or also the link is in the video description and we are going to install it by copying this flower block and pasting it in our up spec ya mol file and also it has a nice home page with documentation so definitely if you want to learn something more about this library go ahead and check it out it's really thorough alright so as I said let's jump over to pops pagamo and we want to paste the dependency that we just copied over here under the flower SDK under deep Nancy's but make sure that your indentation is proper so we don't want to paste it under flatter now we wanna paste it only under the dependencies so shift and tab to move one step backwards and now place it over here hit save and visual studio code will call flower flower packages get once this is done we can go ahead and create a new file for State because in this tutorial we are going to touch the UI only after we have everything for the block setup so now let's create a new file it's gonna be called counter State dart if you've watched my previous tutorial this is something that we didn't have there it's gonna look like this and you don't necessarily need to have a counter state class even when you are using the block library but I feel that it's something that is beneficial especially if you don't have only one property as your state as we do here we only have counter but usually you would have some response from some API also some error if some error happened on the way from the API you may also store a flag whether or not the data is just currently being loaded from the server and so on so you are probably going to have multiple properties in your state and that's when state is really necessary so what do we have here we have one property as I already said then we also have a private constructor and why is it private well because we don't want to be able to just construct classes like that through constructors but we want to be only able to use our factories currently we have only one factory which is for the initial state and whenever the app starts so that's initial state we want the counter to be 0 so we return counter state and we create a new instance of counter state by calling its private constructor because we can call private constructors from within the class obviously and then we use the cascading operator and set the counter property to be zero and I know that this could be done much more simply with just setting the counter over here to be zero since we only have the initial state but if we were to do that you would not be able to see how to use factories for your state creation so I'm just trying to emulate how you would use state in your real app where you have multiple properties over here so state is something that is returned from the block but we also need to be able to pass something to the block in order for the block to decide what to do that's something which is passed into the block or event so let's create a new file counter event that dart and we are going to have two events increment event and decrement event and they are all going to be a subclass of counter event these two events are pretty much everything we can have in a simple counter app and now comes the core of the tutorial which is the counter block itself so let's create a new file for that and over here let's first import the package for block so let's import block dot dart and now we are going to create a class counter block and if you've seen my previous tutorial this will look really familiar but it's just much more simple and that's where the library shines our counter block class needs to extend block and this block will have a counter event and counter state specified because there are generic parameters so let's specify it over here first comes the counter event and then comes the counter state and we need to import both of them so let's hit control and dot so let's import counter event and also let's import counter state and even vs code notifies us that counter block is missing something and that something our two overridden functions so let's override initial state and also map event to state initial state simply as it says will return the initial State and for us the initial state is simply counter state that initial which is the factory we have created and map event to state well this needs to be an async generator this is also the reason why it returns a stream so really the underlying implementation for this block is pretty much the same as we did ourselves but it's just hidden behind the libraries code so let's make this format nicely by adding 1 comma behind the counter event and also we need to tell this to be an async generator by writing async and then the star over here or asterisk and over here we want to have this simple if statement where if the event is increment event we want to yield current state with the counter incremented ry so if it's d Cremant event we want to yield current state with the counter property decrement it the yield keyword just emits a new element so to say in the stream when you have an async generator function then in our UI we can listen to these new emitted States and update our UI accordingly so we are going to do just that next so let's again first remove all of the comments by hitting ctrl F and then we want to search for slash slash dot and asterisk and hit also that we want to use reg X and now we want to replace everything with blank space so we can rid of the comments which we don't need and now save it first we are interested in the my homepage stage because this is where the magic happens first we are currently setting up the state inside my homepage state which we don't want to do so let's delete everything regarding the state setting and now let's create a new final property counter block it's going to be private and it's gonna be equal to new counter block so let's import our class over here also you can get the code from the link in the video description which is gonna take you to reso coder calm also I would advise you that immediately after you create such a block you should write the dispose function so let's go down here let's write this pose and we are going to dispose counter block so just call this pose on the counter block and you are good to go you are not going to get any memory leaks now we want to change our UI to work with the block so over here we have the body of the scaffold which is now only a simple Center widget with the text and with the counter text also we want to wrap it inside a block builder so let's hit control that on the center widget we want to wrap it with a new widget it's going to be block builder now let's cut the center widget from here and the block builder doesn't have a child it rather has a block which we need to specify and the block will be our counter block and also if you are waiting to see how to get the counter block through inherited widget just wait till the end of this tutorial where I am going to cover it but now just for simplicity as we are starting we are going to get the reference directly from our property which is inside this very class after the blog we also need to specify the builder which is the function which gets the context and also counter state so let's import counter stave over here and this function will simply return the center widget so let's write it over here and semicolon and the end let's format it properly and now all we have to do is to replace this counter with state that counter because state contains our counter property oh and also we need to import block builder so let's do just that and yes so once we have that we have just one problem and that is that we have only one floating action button for incrementing and even that is not going to work now because it calls the method which is now deleted I'm not gonna bore you here with creating the second floating action button if you want to learn how to do that you can check out my previous tutorial and also the link is in the video description which is gonna take you to the code from this tutorial alright so now we have two floating action buttons here and we just need to woman there unpressed callbacks what we can do here is to get the block and then we can simply call dispatch and dispatch the event that we want to dispatch so over here we would dispatch increment and from the decrement button we are gonna dispatch decrement event but I don't really like this because you are just adding unnecessary information to your UI classes what I would suggest you to do is to create functions inside the block directly so let's scratch this dispatch call and rather go over to counter block create an increment and also on decrement functions and now from your UI just simply call here counter block that an increment in from the decrement button we are going to call counter block that dick riman or on decrement all right so let's run this app inside our emulator and we can see that this app now works just fine we can increment and also dick remount but now let's tackle the problem with the block provider which is inherited widget so imagine that you don't have everything inside one state or inside one widget directly imagine that your code gets too clunky and you need to separate it into multiple different widgets we're going to simulate that situation by creating a new class for the scaffold so let's hit control and that and let's hit extract widget it's name will be simply counter widget and you can see how via skull refactor this widget for us it passes it the counter block object but this is not a good practice because imagine that you have a really deeply nested widget tree then you would need to pass the counter block to every single widget inside that tree of widgets and that would get pretty messy really soon so we don't want to pass the counter block over here we are going to delete it and we are also going to delete it from the constructor of the counter widget and also from here so again from the constructor where now it shows us an error and only thing that remains basically constant in a tree of widgets is the build context so now we will not be able to somehow package our block together with the build context and for that we can use inherited widget or a wrapper on top of inherited widget which is block provider and it's especially suited for blocks so now inside the build of our my home page state we are going to return first copy this counter widget and now return block provider it's block is counter block and it's child is our widget so just paste it over here it's our counter widget and now we also want to change all of the references to counter block directly to get the counter block from the block provider and we can do that really simply by just writing block provider off and specify the type which we want to get that is counter block and pass in the context now we can just copy this and paste it everywhere where we are trying to do something with the counter block so here in here and now when we hit control f5 for safe and then hit control f5 to Hal restart the app we can see that it still works just fine all right and that's it for this tutorial if you don't want to miss more tutorials from flower like this definitely subscribe to this channel and also hit the bell button so that you are now going to miss any of my new videos if this video helped you with understanding the block and also the block library definitely give it a like and also share it leave a comment if you have anything to say if you have any suggestions or questions follow me on Instagram Facebook and Twitter and see you in the next video [Music]

Channel: Reso Coder

Views: 82,461

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter bloc, flutter tutorial, bloc, bloc pattern, flutter stream, flutter sink, flutter state, flutter state management, flutter redux, flutter mvp, flutter mvc, flutter mvvm, flutter bloc library, dart bloc library, dart bloc, bloc library

Id: LeLrsnHeCZY

Length: 15min 42sec (942 seconds)

Published: Wed Jan 09 2019