BLoC Pattern with Flutter || State Management

hey everybody what's up welcome back to yet another video of channel codex this is your host absal and today we're gonna talk about state management and that we're gonna do with the help of block pattern so stay tuned in the video till end i'm going to explain once for all next time someone asked you what is blog pad and how it is implemented you should be in the position to teach them and that way i'm going to explain so make sure to watch full video we're gonna start right after this [Music] intro so before we begin with the coding part let's ask few questions ourselves what is block so blog stands for business logic component which means that your business logic should be separate than your ui and which answers our second question which is why to use blog of course you don't want to mess up with your code every logic every ui in the same page widget is going there click event is going there your business logic everything in the same page it's really difficult to manage and maintain that such kind of code right so for that we have to use block pattern all right so let's get started with the tutorial here we are inside visual studio code if you see this example it comes out of the box inside flutter whenever you create new application and when i do increment what we observe here that this build method gets called multiple times so each time you click the build method will be called the widget tree will be taken for any update or not and that's a time consuming process so what we're gonna do we gonna implement block pattern and first of all we will learn how to work with stream builder with just three lines of code it's literally three lines of code we're gonna remove these multiple callings and after that we will increase the complexity level will move the business logic which is the actual agenda of this topic we'll move the business logic from this page to the blog parent page and finally what we're going to do is create application for wall street general news application and we're gonna fetch apis and we're gonna populate that using the block pattern so stay tuned in the video and upcoming video and we will nail down the blog pattern once for all so let's begin with our code and create a file called counter block because this is a counter application so i'm going to start with counter block so before you jump into the comment section and start writing that you are taking very basic example it's doable there why don't you take big example why don't you take complex example but wait we have to start from scratch we have to learn the fundamental first and then we will increase the complexity as promised what i'm going to do create a class called counter block just like that and inside that i'm going to define a stream controller now here comes the important part so before i begin with writing code of stream controller i want to show you how stream controller works so let me switch back to my ipad so you are looking at my ipad what we're gonna do is first visualize how stream controller works so assume stream controller as a pipe something like this here something goes in and something comes out now the first thing which you have to remember it's very simple whatever comes in is called sync now this is the terminology of stream builder if you have to work with a stream controller you have to remember this there's just two and three keywords you have to remember so whatever comes in is called sync you are putting something inside and whatever comes out is called stream and this pipe itself is called stream controller so here is our first stream controller there's something coming in and there's something coming out right and let's call this uh state okay this stream controller is for state management right so let's call it state stream controller something comes in something comes out so first we gonna implement this pipe this stream controller in our code so let me switch back to tutorial and write down this code so i will say final and we have named it as state stream controller is equal to stream controller right so it's just simple definition you just define it like this and also we will specify what we are looking inside this stream so what is going to come inside this stream and what is going to come outside right so for that we will specify this stream works with integer fairly simple like you define any variable out there so here we have the first stream controller and now we are going to create two properties one for input and one for output one for sync and one for stream right so using this controller once we'll call the sync with uh property and second time we'll call the screen so let's capture that in a get property and i'm going to say stream sync of type integer and let's define the name as countersink and this will come from stream okay state stream controller what happened state stream controller dot sync i think something goofy over here yes i have to specify this operator over here and then i can call sync property so just look at this code from stream controller we are asking for sync and the data type is stream sync so don't get confused with the sync and stream sync the sync which is the input is called stream sync right that's clear so we defined the first property which is our input property now let's define the output property so let me call stream and this time it will just be stream not a stream sync because this is the output property and we'll define a getter counter stream just like that and we are going to say state stream controller dot stream so now if you look at these three lines what we have done so far created the stream controller and used these two properties stream controller dot sync and stream controller dot stream sync is for input let me repeat once again stream is for output and that we are capturing in these two properties it's that simple right we can even work without these two lines these two lines is just to expose these properties outside the block pattern so we can make this state stream controller private so that other people don't have access to it they just have access to input and output not the other controls how it's working right so i'm just going to make it private just like that so now our stream controller is ready now we are good to start with the binding to ui so before we do that let me show you how it really works in the ui so i'm back to my ipad screen so say for example here let me just turn it on so here is the ui button okay and whenever there's a press event happens that time it will give input through this sync property right so first we're going to do that in our code so i'm going to switch back to my main file where our page resides so instead of calling increment counter i'm going to add my own method and to call block pattern right that block file we need instance of that so let's define here on top so i'm going to say final counter block okay and this will be of type counter block give me a suggestion come on okay so here we got our instance of counter block using that what we're gonna do on click off button over here we can take the sync property right so here it is countersink and we're gonna add our information so i'm going to add the counter so it's this counter okay so what i'm doing now is basically if i switch to ipad okay on the click of button i'm passing some event to the stream controller right now what we have to do next is listen for the output right this part we have to work so what we gonna do for that so once the stream is available our text will be always listening to it all right so this is going to take the output and that output will come from the screen so let me show you in the code how we're going to do that now if i increment the counter nothing happens because this text is still binded with the counter variable and that counter is still to zero right we are not setting the state even if we are incrementing from here we are not setting the state so what we have to do for that we have to listen for the change we have to listen for the stream now what i'm going to do it's very simple just wrap your text with the screen builder and if you have worked with the future builder it's similarly like that you provide future you provide builder just like that you provide stream and that is coming from the counter block which we defined on top and we are listening to counter stream right so this is the stream and of course we want a builder as well so builder will be like this and inside that we will return this text as simple as that so let me just return this text quickly okay and remove this child we don't need it anymore format it and now let's try to run application once again so now if i click this plus the counter is incrementing and if you notice here like let me just restart for you so now our widget tree called once which is fine for the first time and now if i increment there's only one log which means our widget tree is not getting called again and again and only the text widget gets updated now if you look at the definition of block block says that your business logic should be separated from user interface but still with this example we are using the counter we are incrementing the counter and every step we are doing ourselves we are just using stream builder to hold the state so we're gonna modify our implementation in such a way that the logic the counter increment moves to the block pattern from your button click or from any interaction on the user interface you just want to send the event to the block pattern right you just want to say that i want to increment i want to decrement i want to reset something like that you just want to give event over there let me switch to introduction okay you just want to provide the command and let it run its own logic it's that simple okay so what we are going to do next is create another stream controller for user input fairly simple you already understood the stream and sync concept and this time we will call it event stream controller fairly simple right so let me just change the linking so instead of calling instead of getting called to this stream controller now our button will be calling this stream controller and what it will pass is just event that it wants to increment not the actual counter value okay and inside this stream controller it's going to decide depending on the event what should happen and whatever is the output internally so let me show you this guy so this stream will be further passed from here to this stream controller so basically we have two stream controllers now which is internally connected and we are passing input to one stream controller there it's processing and depending on the event user requires it's going to pass another output to the state stream controller and that will give you output to the text so this is the way it's connected now so let me show you this whole process inside visual studio code i hope you people are understanding the point which i'm trying to make here it's very simple your button is triggering an event which goes to one stream controller depending on your event it will decide what is the output and it will send to another stream controller that will give you output to your text widget or your any user interface right so let's get back to the code and see how that really works so i'm going to go back to this counter file counter block over here and create another stream controller so i'm just going to copy paste this three lines once again and this time instead of state it will be event stream controller really simple and instead of countersink it will be even sync right and instead of counter stream it will be yes even stream so basically we got another pipe created over here and here starts our actual logic so what i'm going to do whenever this block gets created so whenever this counter block gets created which means we are writing a constructor over here what we gonna do is listen for change in the stream okay so we gonna keep listening for change inside event stream okay i'm going to say like that even stream dot listen so we are talking about the lower pipe which we just created so the button is giving even to that pipe and from there we will process it so once we have the output in the first pipe we gonna process and send back to the next pipe but what is missing here again our second pipe is accepting integer right and we don't want that we want any random value like any event from the user you can literally define any any data type over there you can ask user to pass boolean if it's true do something if it's false do something like that but i'm going to create enum which increases the readability and it's much understandable so what i'm going to do is create enumeration okay and call it counter action all right so what all action user can give user can provide increment user can provide decrement or maybe reset right so our second pipe will not be accepting integer from the user when you click on the button it doesn't ask for integer instead it asks for counter action what you're gonna do with this button click so i'll say counter action over here and this places also we'll have to modify cool isn't it so now if you look at this event when we are listening so this even gives a counter action so just looking at that i will say if even sorry if even is equal to equal to counter action dot increment i'm just going to increment the counter so let's define a counter first i'll say integer counter like that and when we construct i will say counter equal to zero this is just initialization and what we're gonna do when the user gives increment command increment even we're just gonna up increment the counter just like that and similarly we can write other cases else if event is equal to equal to counteraction dot sorry counter action dot decrement do this step right sorry what is happening okay i'm just going to copy this line so else if even controller is reset all right this is your business logic basically whatever you can you may have different business logic but this is what happening when you listen to your stream when something is coming some event is coming you can decide your own logic so in this situation make counter equal to zero if the event is reset then make counter is equal to zero so so far so good we are listening to the first pipe so let me let me switch back to ipad and show you what is happening now so here at this point we are listening continuously right if you look at the code we are listening at this point continuously and depending on the event sent by button what we are doing is defining different different set of action right and once we get that action defined what we have to call is to pass this same data to our another stream controller here we will pass this data internally right so let's do that whatever we have received so far depending on the event whatever we have achieved whatever business logic we have performed that data will pass back to our uh first our top stream controller right so i'm going to say and to pass it to first stream controller what we have to use the sync property right because we are now giving input to the first the top one so we will say what is the name of top one here countersink right so i will say countersink dot add we have the counter and then i'm going to pass to the first thing so as soon this sync will get this integer number it is going to return to your text so let's see that in action and what i'm going to do now is change a little bit of implementation in our main dot dot so instead of calling this counter block dot counter sync now what we'll do instead of calling this counter sync i will use event sync correct and even sync doesn't accept integer number it accepts the event so we have defined enumeration for that i'm going to say counter action dot increment and now we don't need this counter anymore so i'm just going to remove it from here i'm going to remove this guy from here and one important thing which i missed while showing the demonstration this binding should be with snapshot dot data right you already knew that so here i will say snapshot dot data okay so basically our text has a binding with the output of the stream controller that i missed in the first step and what we are doing here on click of button we are calling event sync so the lower stream controller we are passing some value that is processing and it's passing back to the top stream controller and that is returning output to your text so let's see that everything in action i'm going to restart the application one more time and now you see the null value because that is our initial data we have nothing to show right so let's begin and increment the counter you can see it change to one if i do again it calls two three four so now we have successfully implemented the block pattern with the simplest example and with simplest explanation so i hope you guys understood still the tutorial is not over yet what we're gonna do is add few more events and few more properties so as you saw that the first time the value was saying null so the way we can handle inside stream builder you can specify what is your initial data so just specify my initial data is zero it's as simple as that so next time when you reload your application it will start with zero here you go so now increment it's going perfectly fine your widget tree built only once you had state management with block better now let's move ahead and add few more actions and i'm going to do that real quick so i'm just going to wrap this button inside a row and duplicate this button couple of times so one is for increment another one is for decrement the last one is for reset and we'll also change the icons so i'll say remove for decrement and for reset i'll say reset there's nothing like that so i'll say loop okay here we have it and now you can see the button is over here i'm just going to assign this property real quick it's at the end and of course you can add space in between so we are not going to bother about that the first button calls increment action the second button will make it called decrement action and the third one will make it called reset just give it a command that i want to do this thing and how it is done it's a part of your blog business logic right you don't have to bother about that so i have given different different commands for this so let's re-run our application one more time and see what is happening so first value is zero perfect i'm going to increment it's incremented properly fine now let's decrement it it's decrementing as well congratulations it's going in the negative direction you can put your validation over here inside the block pattern any business logic which you want to do and let's now test the reset if i click reset it again became zero and now again you can do all this operation so that is the block pattern for you guys i hope you people understood with this simple example we achieved blocked in almost 20 or 30 lines so now you understood the block pattern we created two stream controller for each stream controller we need sync and stream we are passing our information our command to the first stream controller it process it and give us to next stream controller and that's how everything is working now if you notice let me switch to ipad and give you one extra tip so here this particular stream and this particular sync is not exposed to the user or to the user interface basically the user is interacting with this thing and user is interacting with this stream so what we can do we can simply make this stream and this sync private so i'll just dim this out so this is not exposed to the user user cannot interact with these two streams directly so this is what blog pattern is i hope you people understood in next video i'm going to take a little bit complex example where i'll create a wall street journal news application which i've done in my previous tutorial so there i just consumed a rest api i'm going to extend that video with the help of block pattern and we will call rest api do operation like that using block pattern so thank you so much for watching i hope you people understood give it a like if you have really enjoyed if your stream concept if your stream builder concept and blog concept got cleared make sure to subscribe the channel and of course you can take membership as well if you are kind enough to support codex channel i will see you guys in the next one

Channel: CodeX

Views: 39,232

Keywords: design, flutter, tutorial, how to, android, ios, ui, latest, theme, app, Flutter ui, adobe xd to flutter, flutter tutorial, minimal design, flutter ui design, flutter ui, flutter animation, animation, layout, pagination, gradient, rounded corner, learn flutter, flutter dart, flutter custom paint, flutter sdk, provider, codex, bloc, pattern, streamcontroller, streambuilder, sink, stream, state management, with flutter, flutter state management, flutter bloc pattern, flutter bloc

Id: jIoWkct6_EM

Length: 22min 49sec (1369 seconds)

Published: Sun Aug 23 2020