Hello friends. I hope you are doing well and you're healthy and you're keeping safety. So I'm Abisheks Doshi and today's talk is on block or you can manage blocks of your app app with blocks. So first of all, who am I exactly? I am a Google developer expert for Dart and Flutter. I am also a Google mentor. So basically I mentor individuals as well as startups to migrate to flutter or learn flutter. I am also Flutter vulsar organizer, co organizer of Flutter India and I have been working in Flutter since almost past three years now and professionally I am a senior flutter engineer at Somnia Software. I've been writing event tech articles on Flutter since past six to one year, six months to one year now. So yeah, you can say that I'm suitable for taking this session. So what is flutter exactly? And why is it trending so much? So first of all, Flutter was released in around 2018 and it is developed by Google and it is a UI toolkit that supports multiple platforms like Android, iOS, Web, macOS, Windows, Fuchsia OS, Linux embedded systems, et cetera. And it is trending because one of the reason is it is open source and it has a large community support and it is easy to use. So coming to today's topic, what are the points for discussion then? So first we would see what is state, what is state management, why state management is needed, and if we need state management, then what is block exactly? And some terminologies related to block. And then if time permits we would be doing live coding or I would show you the code. So first of all, what is state? So in flutter, everything is widget. Widget, you can say is a smallest form of UI that you can show on the screen. If you are from web development background, you can compare widget as a tag. So in web development we have button as a tag. In flutter we have different kinds of buttons, has a widgets, raised button, elevated button, text button, et cetera. So in the same way, every widget would be having a state. Or you can say every widget has properties, or the properties of a widget considers to be a state. Now let's suppose you have a text field. So the text that you enter becomes the state of that particular text field. So every properties related to that widget becomes the state. And the state can be independent. The state can be dependent on one another. It is also possible to have a single state in the entire application. It is also possible to have a single state in a one particular widget or one particular file. Based on how you manage your state or based on how you lay out your UI. Also, it is possible to manipulate the state throughout the lifecycle. So yeah, when you're handling with state or when you are working with state, you should keep in mind that there are chances that you might face issues or your app can crash if the state is not managed properly. So what is the role of state then and how is it useful? So basically there are three points that we can consider for the state. That is, information about widget can rebuild UI whenever we need and gives control over the entire lifecycle of the widget. Now going deeper with the state object, we can access the information about that particular widget, or we can even access the information about the widgets, about the parent widget. So yeah, state is the information that can be read synchronously when the widget is built, it holds the properties of the widget. So as I said, state can be considered as the properties of the widget and we can access that properties with the state. So second point is it can rebuild UI whenever we need. So basically state object is responsible for rebuilding your UI. That's the reason we call set state. We have a set state method, we have a set state method that updates your UI or recalls or rebuilds your UI. And the third point is gives control over lifecycle. State can change during the lifetime of the widget. If you don't utilize it properly, you can have adverse effect on your app. Basically your app can crash, you can have memory, lets, et cetera, et cetera. So now what is state management then? Basically has the name suggests managing the state properly so that you don't face any issues in your app and you can rebuild your UI whenever you need. Then why state management? Why is it needed? Or why is it a really hot topic in flutter? So if data changes or new data is being added, then and only then the request to the server will be sent. So for example, let's suppose you want to update your UI when your API call is successful. So in this case data management will be important because let's say you call the API, it takes time to get the data and then you want to update the UI. Or let's say when the app is being hit, you want to show a loader so that the user gets to know that the API is being hit, the data is being fetched, and then you can update the UI. So in this case, state management is important. State management helps to centralize and make the maintenance of code very easy. Also improves the quality of code by reducing the code size and making it more readable as well. Let's take an example. Let's suppose that you have an application where there are only two screens, page one and page two. Now you want to pass data from page one to page two. It becomes very easy, right? You can pass it when you navigate to page two. But what if you have a screen? What if you have an app? These, there are five pages and you want to pass data from page one to page five. So you can't pass the data from page one to page two to three to four to five, right? You have to pass data from page one to directly to page five. So in these case, state management helps. State management basically will help you to allow excess of data wherever you want. So what is block then? Basically, state management can be implemented using many techniques. One is block provider Riverpod Redux Rxdart. Many such packages are available for implementing state management, and one of that is block. Basically block stands for business logic components. Block basically uses the concept of inherited widget. Not only block, but any state management package that you check will use inherited widget concept. We can implement blocks using stream and sync, but we already have a package called flutter, underscore block, which is a wrapper of stream and sync. So there are a few terminologies related to block, which is event, state block provider, block builder, blocks listener and block consumer. We'd go through them one by one. So first is event. Now what exactly do you mean by event? Event you can say is a class or a trigger that you pass through the block and based on that block manages the data. So let's suppose you are having a login functionality, Google sign in, let's say. So what your app would be doing is on the UI part, it adds an event or sends an event to the block. Let's suppose the name of the event is Google sign. In event it sends the event to the blocks, blocks matches that event or takes that event. And from that basically you can also pass parameters like any user id, email id, et cetera, et cetera to the event. So block would take that parameters, it would process that parameters, or it would process based on that data, maybe an API call or anything that you want. And once the process has been successfully completed, it would send a successful state to the UI, back to the UI. If it fails, it will send a failure state. So to summarize, we can say that event is something that you send from UI to block, and state is something that you send from block to UI. Now what is block provider. Then basically blocks provider is a widget that provides the instance of your blocks to the widget tree. Now the normal practice is to wrap the material app that is the root of our widget root of our application with the block provider and provide the blocks to the entire widgets tree. But this would create a single state for the entire widget tree. Now if you want to have multiple instances of the same block, it would be good to wrap the page root root of the page with block provider. Next is block builder. Basically block builder is responsible for rebuilding your UI. Block builder is a widget that matches state and rebuilds these UI based on the state that is available from the block. Block listener is something same to block builder, but it doesn't rebuild your UI, it just listens to states and performs some action. So let's suppose you want to navigate to a page. Navigate to home page. When Google sign in is successful then you would use block listener because you're not rebuilding your UI, you are navigating to a different page. But let's suppose you want to rebuild your UI. You want to show something different on your UI based on success rate of the Google sign in, then you would be using block builder. Now what is block consumer then? Basically block consumer is block builder plus blocks listener. Block builder, the combination of block builder and block listener. Basically when you need to use both, when you want to process some data on the UI part as well as rebuild your UI, it is preferable to use block consumer. So I hope these terminologies are clear because these are the base of blocks, you can say. So yeah, enough of talk. Now let's check some work these. So basically whenever we create an application, our first, or you can say our basic app that we have is counter application. So what we are doing right now is to have the counter application to update the counter application into block. So I hope the vs code is visible and let me zoom a bit. Yeah, okay, so there is one class called main dart which just provides my home page. So you can see here we have the block provider and I have provided the counter blocks to my home page. Now what is inside the counterblock? So what counterblock does is it maps the event to state. This is the older version of block. The newer version has very simple code. But yeah, basically the concept remains same. It maps the event to state. So if event is counterevent increment, then yield the state with an incremented value. So what is the event then? Basically it's just an NM where we have added an increment part. Now in the home part you can see I have created a variable for counter blocks and inside the build method I have initialized it. This can be done even in your init state as well. Basically we are providing the instance of blocks from the parent to this variable. Now the code is pretty simple. You can see just 43 lines of code with all the formatting and stuff. So the scaffold and everything remains same. What I have done here is in the body part I have added a block builder and in that return a text widget which displays the state. Now the state is just an integer value over here, but we can have multiple states based on our use case. Now when the user clicks on the button, the floating action button, a counterblock event is being added over here. So you can see in the entire application set, state is not used, which means that I am not rebuilding the UI using setstate. So I hope the code looks good and it's pretty simple. I guess the code is very simple for the counter blocks. But yeah, when your application goes in bigger size it is possible that you would get confused with all the blocks, elements, event, state, et cetera, et cetera. Basically that was it. But the work that we have, you can see you saw that the code was very less to just update these counter application with the block part. So yeah, if you have any questions, feel free to ask. I hope you learned something new and feel free to connect with me on Instagram, Twitter, LinkedIn, GitHub, Medium, et cetera. And the username remains same, that is Abisheks Doshi 26. Yeah, you can read my articles on medium and these also username remains same Abisheks Doshi 26 so you can go abhishek Doshi 26 medium.com for my medium articles, I guess. Thank you so much for joining today's session and I hope you learned something and I hope that you stay safe and maybe migrate to flutter as well. Thank you so much.