Easiest way to understand BLOC Pattern in Flutter

hi friends I'm mother thought from easy approach and in this video I'm gonna give you a core and fundamental concept by blog patron so that you can understand and implement it easily but before starting the video I'd like to tell you that the villain would be longer because we'd be also implementing the block patter in the same video but I promise you before the full video you would have a good understanding of blog patron and you'll be able to extend the knowledge or the concept to become pro and blog patron now let's move forward in order to learn or understand block read run you need to have a knowledge of these four different terms the state event stream and sing it state in simple words is that the date of your application is currently showing if you already work on flutter you already or you already have a knowledge of a state but in symbol is just the data your application is currently showing and as you know flutter is a reactive framework and whenever the state or the data changes the UI reacts to it and rerender itself to show the latest version of your application now let's talk about event event is any action that's detected by your application typically it's a user action like clicking one button suppose you have an application and there's a load button on it and whenever the user click on load button that's the action we are calling even now let's talk about the streams is stream as the name suggests can be considered as a medium through which data continuously travels a stream is like pipe and the data traveling Torres is like water so here's a pipe and there's a data traveling tour it so this is the whole things we are calling a stream and obviously there's a point where you actually consume or receive the data is flowing through the stream and that's the point we call sync sync can be considered as the point where you receive or consume data from the stream so here it is the point which we are calling sync now you have a knowledge of these four terms and now we can understand the block pattern easily so blog component blog patron has three different components the first one is UI block and the data provider the UI can interact with block and the black block can do same and the block pattern can block component actually can interact with the data provider and the data provider can track the block now how it works the UI contain all the UI of your application but what blocks contain block is the business logic component and in contains all the business logic of your application and data provider can be considered as database or your back end and what blog this blog applies the business logic to the current state and it recreates a new state and send it to UI and whenever you I receive a new state it rerender itself to show the latest version so blog is nothing but just it contains the business logic and based on the business logic it creates a new state and whenever it creates a new state the UI rerender itself and changes and change itself to show the latest version so now let's talk about this business logic component in detail so that we can have a good knowledge by understanding it with a practical example now I have an application which has a load button and it means to be appeared here for now there's no image appear but whenever user click on load button the image has to be appear here the application is a blog component and it has initial state which image not yet loaded and you can see that UI is depicted same as this stage suggests the application can track with the block and the block interacted UI and it has a data component as well which is your database to which data can can be sent and received now whenever the user click on load button your UI or your application sends the button click event to the blog as an input and what block does it create a new state based on the business logic and the event which has been passed to it so there is a button click event and as you know on this even we need to load a new image from the data so based on the business logic it receives have event and creates a new estate and the new state is image has loaded and you can see the new image on the screen so definitely the law component has a mapping function as well which actually maps the even to a new estate and yeah there's a mapping function in the blog so blog component actually contains two different things that that's the core things that you need to have in your blog the first one is initiative state which shows the initial state of your application and a mapping function which take event as an input and produces a new state as an output so that's the best two fundamental thing you need to have in your blog now where its source and where is the stream sorry various stream and very sink so your blog contains or it actually contains a stream of new estates and it it accepts it takes input as event and it recreates a new state in extreme and your application is is a sink which consumes the new estate and whenever the new Street and estate is created in blog stream the the application use it or consume it and rear end result to show the new state is actually act as a sink and your blog had contains a stream of new states now will implement the blog patron in our simple counter application the counter application contains three different widgets the first one is a text widget which shows the current value of the counter and there are two different button as well which is of increment and decrement at first before implementing the counter the blog patron you need to figuring out how many events in your application are which actually changed the state of your application so in this application there are two different events the first one is the increment event that would change or increase the value of counter by one and a decrement event that would decrease the value of counter by one so these are two different events increase and decrease that would change the state of your application so after figuring out this you need to create a clause which is of block clause so before doing so you need to add dependencies I go to pub spec file and add these two dependencies block and further block after doing it you can now create a new file a new clause so L naming it I'm naming it counter block and first of all I need to import here block door dart and after doing it we need to initialize here or define here all the events that your blog can accept as input and we have we have already discussed that there are only two events that's that can change our application our debt card that can change the state of our application so I'm defining these events in enum counter events you and false one is increment and second one is decrement I use here enum however in most of the cases we use clauses due to fine events to add some more details to it however for the sake of simplicity I just use here in Amin our Clause our counter block Clause so will extend its to block class and will just pass two different things here the first one would be the events that your counter block can accept as input which is counter events you and the second thing is the data type of the output state so they'll be returning the integer value so that's the reason why I use here and teacher now I've been one we need to do we need to implement two concrete methods the first one is the initial state and the second one is the map even to a state so now whatever we need to pass initial state here we need to return 0 because we want a count or value to be 0 initially when the application started and now in this map event 2 state method we need to continuously accept event as input and then eat we need to continuously produce new state accordingly so before doing it we need to change it to a sink because this function is continuously accepting new inputs and continuously producing new ad Tusa debts needs to be run in a different thread so that our application running smoothly so that's the reason why I write here essing and make it an asynchronous function now we to figuring out what event is currently we have received so so to do figuring out add we need to add here switch and we need to pass here the event and there are two different cases the first one is the increment case so we'll do this and the second case is of decrement is how you can create two different cases when the encounter intimate even will just return the value which is the one more than that original or current estate of this block so how can you access the current estate you just right here a state and this this is how you can access the current state of your block but we need to return current state plus one so how can you do we'll use yield and we'll just estate plus one so what's the difference between yield and return here returns a value but does now terminate the function however returns returns the value and terminates the function so we need we don't need to return up we need to don't need to terminate the function that's the reason why I use here return I use a read now the part of blog is now completed now we need to go in our main door dart file here what we need to do we need to hair add event to our block while pressing on increment button we need to add increment event to our block or we need to pass as an input increment event to our block and in this decrement we need to pass the decrement event but how can you access the counter block in our main door dive file or especially encounter screen widget so to do so you need to wrap your counter screen visit to a block provider widget and before using a block provider or to use block provider you need to import flutter block dart file and what I do here I use as blog provider and in we need to define her builder and in builder we'll just pass bill contacts and we'll return here they count for a block you and here in charge we just pass the contrary in visit what dispatch block provider will do it will pass the counter block instance to the descendant of itself I mean the counter screen would have access can access the counter block instant but how can you refer your counter block in your counter screen to do so you'll just make a new variable counter block and you'll use a block provider dot off contacts and here you need to pass the counter block a type of your block this is how you can access the instance of your counter blog in your counter screen now what we need to do whenever the user click in this increment button we need to pass our our add event to our contour block so how can you do this you need to access this counter blog and you'll call the add function and the add function you'll just pass the increment even and saying they need to do here in the decrement but we'll just pass here the decrement even so this is how you can send the event to your blog so so far we have sent the Blas to the event add to our blog and we have defined the mapping function as well that we need to do and how the how our blog will map the event to the new state but we haven't consumed the new state as so far and we're very actually need to use the new State is this tax in this tax widget so what we'll do we'll just wrap this tax visit into bird sorry into block builder so blob burger is the part of application that's actually affected by at the change in your state or by that's the changes after the new state has been sent to this main file so what we'll do it we'll just right here builder and hair losses passed bill context and the second thing is the interior estate okay now we return our tax visit and we'll just here use this date volume okay one thing more we need to pass here two different things one is the counter events so I concur blog the in the datatype of your blog and the second thing is the type of the output which is int and this integer state is is actually the new newly produce or newly generated state based on the business logic and this is how you can use this estate here and now we'll just run this file ad to see applicate to see the application is working correctly I just run here and well clicking on increment you can see the value is incrementing by one and when I click on decrement the values decreasing by one so this is how you can use block patron to make your application work greatly and it's a it's a state management approach that's recommended by Google as low so this is how you can do we just create a block file in which we define these two functions the map event to state and the initial state and we need to define events as well and the second thing is this part which is actually the same point of your application or the widget that's being affected by the change of the state so you can use block builder to rerender at the part which is affected by the change of the state we also added here the events to our blog the increment event and the decrement event and don't forget to use the block provider in order to provide the instance of your block to the descendant of the child so in it's just a basic implementation of block patron there are some more complex topics regarding this block patron but this is the basic and you can extend the concept to become a pro that I have said earlier so in the next videos we'll be covering some more detail concepts and block pattern as well so please subscribe the channel and share the video to those people that needs this video thank you thank you for watching

Channel: Easy Approach

Views: 77,935

Keywords: flutter, bloc pattern, flutter bloc, flutter bloc pattern, flutter bloc library, easiest way to learn bloc, flutter sdk, flutter bloc package, flutter tutorial, flutter state management bloc, bloc, bloc pattern flutter, bloc flutter, google flutter, flutter state management, bloc in flutter, flutter redux vs bloc, bloc flutter pattern, rxdart bloc flutter, what is flutter bloc, flutter io, flutter tutorial for beginners, flutter widgets

Id: 2zZkVLsySm4

Length: 15min 52sec (952 seconds)

Published: Mon Nov 11 2019