Flutter BLoC Pattern Tutorial From Scratch

app developers can rapidly speed up their development by using flower which is a cross-platform UI framework just like with everything though you can use flower to enhance your coding experience or to completely undermine it not managing your state is one of the main sins of software development and flower is no different simply set if you put your fields all over the place you are going to end up with a huge mess in your code flower is really awesome because it gives you absolute freedom in how you can manage this state and it's up to you to decide on the particular technique and I feel like the block pattern which stands for business logic component is a perfect fit for flower and that's why you are going to learn the basics of it in this tutorial Oh welcome to resell coder and let's learn how to make this really simple app using the block pattern where we will be basically just adding stuff on top of the default counter app with which you are probably all familiar because it comes with every single new flower project that you create and in a normal counter app you have only this increment button but we are going to add also the decrement button for the number and yeah it's going to be all done through the block pattern we have basically two choices on how to deal with the block pattern we can use the low level stuff which is basically vanilla flower so to say by using stream controllers streams and sinks and that's how we are going to implement the block in this particular tutorial which means that we are going to implement it all ourselves but it's going to be pretty simple then there is also an awesome block library which helps us manage the complexity of the block by creating some abstractions and hiding the code behind the block behind some really nicely named classes and functions I feel like that in order to understand the library you first have to understand underlying implementation that's why in this first tutorial you're going to learn everything from scratch if you haven't yet installed flower you can go to flower IO also the link is in the video description and there is an awesome tutorial on how to set everything up whether you are on Windows Mac or Linux so just go through it and you are going to end up with a new flower project which will look something like this one we can immediately launch it by hitting f5 if you are using Visual Studio code and the app is going to look like this it has only the increment button and it increments how else the number what we want to do first is to get rid of these obnoxious comments so just hit control F in Visual Studio code we want to replace everything which is behind two slashes which signifies a comment so slash slash and then dot and asterisk and also make sure to enable reg X and now just we want to replace it with blank space so just replace everything and once we have that we can hit can or shift alt F to format it with dart formatter and the code will be nice as the first thing let's modify the UI because we want to have another button for decrementing the counter so let's add it all the way down here we have a floating action button set up inside the scaffold and the floating action button is of type widget so it doesn't actually need to be a floating action button itself it can be any kind of widget for that reason we are going to wrap this floating action button with a row so hit control + dot and we want to wrap it with a row rose put their children besides each other horizontally so because we want to have those two floating action buttons beside each other and the horizontal axis we put them inside a row now we want to add another floating action button in here so we're just going to copy all of this and paste it below let's check out how it looks when we save it it looks something like this which is not all that cool first let's modify the button which should be for decrementing by changing its tooltip to say D Cremant and also the icon should be I can remove not add now if we take a look at it it's going to look a bit better but still the alignment is pretty bad we can align these two buttons to the right of the screen by using a main axis alignment on the row itself and main axis alignment is alignment along the main axis which in the case of the row is the horizontal axis so we want to align it and the horizontal axis towards the end of it so when we hit safe now the two buttons are going to be positioned somewhat nicely but still they are too close to each other and for that reason we need to put some spacing in between them and we can do that with a sized box and this size box will have width of ten density-independent pixels or how else are they called in flower I come from Android so I don't really know all the flower terminology just yet but basically what this will do is that they will be spaced out nicely alright but now we have a bit of a problem because the plus button increments and the minus button also decrements and I'm not even speaking of the fact that we still aren't managing state through the block pattern but first before implementing the block we should probably have a functioning app with the old fashioned state in your widgets kind of way for that let's look at how the counter is incremented we can see that on the increment button floating action button we have an unprecedent riman counter if we hit f12 which takes us to its definition it takes us to the top of our home page state where there is a simple function which calls sits and then it increments counter inside that said state whenever a set state is called the underlying widget tree is rebuilt and because it's rebuilt and the counter is already incremented the number will be incremented on the screen flower works a lot like game engines which basically render new content on the screen periodically but in the case of flower it doesn't do that periodically like every second 60 times per second right but it does that only when you call set state so now we have a good idea on how to implement decrement counter so we can just basically copy this function and call it a decrement counter and only change the plus plus to be a decrement ation of the counter and now we can go down to our floating action button for decrementing and instead of increment counter we can call or pass in the decrement counter now when we save this and go back to our app it's going to be working just properly incrementation works and decrementing also works if your whole state consists of a single variable as it is in our case because we have only the counter integer here then it's probably just fine to manage your state like we are doing now through its set state and having the state directly inside the widget however as soon as you add some api's some databases and all of that and as soon as you need to parse some json data and then output it as dart objects you are probably not gonna wanna have the stay directly inside your flutter managed widgets or whatever else is managed by flutter like for example this state object one of the biggest problems of app development is that you have spaghetti code which means that you have everything all over the place and after a while you don't even know where something is you have to search for it for ages when you change something it's going to break everything down you cannot test your app because it's written in such a complicated way that testing is impossible so we need to have some kind of a way to separate our state from the UI for a vet as you can probably anticipate we can use a block and a business logic component is basically a box where events come in from one side and the state comes out from the other side the basic concept is that events go in and the state goes out and the block just operates on these events to basically figure out which state it should output that's a bit of an abstract description so let's look at it in practice first up we are going to create the events which will come into the block and the blog will then figure out what to output we have two basic events one for incrementing the counter and the inner one for decrementing the counter so we want to create a new file under the Lib folder and we are going to call it counter event dot dot inside it we want to have an abstract class counter event and also I should probably mention that you can get the code from this tutorial by going to the link in the video description which is going to take you to resew color comm so if you don't want to type everything out you can just get the code and look at it at your own pace this counter event is the base class from which all of the subsequent increment events and decrement event will inherit that takes us to the increment event which will look basically like this it's an incompletely empty class it just extends the counter event and then we also want to have decrement event and that's about it these two events are going to be passed into the block now let's create the file in which the counter block will be situated and it's going to be created under the lip folder and how else it's going to be called counter block it's also going to be a class we first want to import dart async which enables us to use stream controllers things and also streams I'm gonna explain what they do in just a bit and then also we want to import our counter event which we have just created first we want to have the actual counter variable inside of here so just simple encounter and we're going to set it to be zero by default then next up we are going to create a state controller which will be a stream controller and what is this counter State Controller going to do as you can first notice this counter state controller is private because it has this underscore before the name and then also the sink is private but this stream is public you can think of the stream controller s of a box which has two holes one for input and another one for output the one for input is also called a sink and output is called a stream whenever there is some input to the sink it's going to be automatically output it through the stream in our case we are going to put numbers inside this encounter sink and those same numbers are going to come out from the stream and we are making only the stream which outputs data public because we only want our widgets to be listening to the output of the counter state controller all right so we can already listen to the value of the counter through this counter stream but we also need to have a way for our UI to input the events for decrementing or incrementing the counter so how are we going to do that well we are going to create another stream controller but this one will only expose a sink this second stream controller is called counter event controller and the sink is counter event sink our you I will put events so increment event or decrement event into this sink you may say there all right that's all nice but you previously said that a block is like a box where events come in the state comes out so we need to basically somehow connect this event sync with the counter stream so that events come in from this sink and the counter value comes out from this counter stream so how are we going to do that well we can listen to the counter event controller this one stream so inside the constructor of the counter block we are going to listen to the output of the counter event stream and the counter event controllers stream is going to output whatever is input to it through this sink so when our UI inputs an increment event this increment event will be output through the stream and then we can listen to it and then subsequently we can map this event to a new state which is a simple function which will basically accept an event and then if that event is increment event we want to increment the counter if it is not so therefore it's D current event we will not do many country and then next up really important we want to add the new counter value to the sink of our counter state controller and that will make sure that it gets output through its stream because remember state controller this counter state controller of type stream controller is also like a box where values come in through the sink and they also come out through the stream so just to recap a bit you can see that our UI gets exposed to only two properties here one is the counter stream which outputs stuff and the another one is the counter event sink which inputs events and let's also not forget about the really important dispose function because this pose will close our stream controllers and this is really important because otherwise you are going to get memory leaks I know that this may seemed a bit bloated for the things that we are doing with the block but the block pattern is really useful for when you are having some more state in your app and also if you use the library and not do it yourself or if you make some kind of abstractions yourself by not using these stream controllers but somehow hiding them behind nicer names you are going to find out that the block pattern is really simple really performant and really powerful but anyway what's left to do now for us is to implement the UI so let's jump back to the main dart file we are going to get rid of the two functions for incrementing and decrementing and also of the counter itself we are going to create a final block which is gonna be equal to a new counter block and hit control and that to import this counter block here in real more complex app you would create this counter block in one place and then pass it down the widget tree through inherited widget but because we don't have a complex widget tree we don't need to do that so we can just reference this block property directly from here alright now here where we have the column we want to cut that out from here for awhile and we're going to paste it in later but this child should now be a stream builder so stream builder like this you can either write it out yourself or just write stb and then hit enter if you have the snippets vs code plugin installed and the plug-in is called awesome flutters snippet so definitely install it because it has a lot of time-saving stuff inside of here anyway now the stream that we want to listen to is the block that counter stream and also block is private so don't forget to add underscore before it initial data will be 0 then we can also indicate that this asing snapshot will hold an integer value and now we can just remove this container and instead we want to return the column which we have just cut from this file and then now we are passing it back also format the code so shift alt F and instead of displaying counter here we want to display whatever is inside the snapshot so snapshot that data the core takeaway from this is that stream builder is a really nice widget which enables you to work with streams really efficiently there's still one thing left and that is to pass the events into our block and this can happen through the unpressed properties of our floating action buttons so instead of calling increment counter we want to call a new anonymous function and that one we'll call block dot we want to get the counter event sink and we want to add to that sink and we want to add an increment event and also import that class and then also similarly what we want to do in the unpressed of the decrement floating action button is there we want to call add but this time we want to add a decrement event alright and now if we do a full restart so control f5 just to be safe come back to the app and now increment and decrement it all works and we can see that it's going through the block because when we put a breakpoint over here for example right here and we increment we're going to hit the breakpoint so we know that we are doing everything properly oh and also one thing that I forgot here is to add a dispose function so we want to override this pose so just write this and it's going to add it and then inside this dispose we want to call block the dispose because otherwise we are actually not going to get rid of those stream controllers so we are going to get memory leaks but now we aren't going to get them so that's all alright and that's it for this tutorial if you don't want to miss more tutorials from flower and also the flower tutorial in which we will be using the block library instead of building the block ourselves definitely subscribe to this channel and also hit the bell button so that you're not going to miss any of my new videos if this video helped you definitely give it a like and also share it if you have anything to say leave it in the comments follow me on Instagram Facebook and Twitter and see you in the next video [Music]

Channel: Reso Coder

Views: 268,641

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

Id: oxeYeMHVLII

Length: 20min 51sec (1251 seconds)

Published: Sat Jan 05 2019