Flutter BloC Tutorial for Beginner | Flutter State Management

welcome to my channel in this tutorial I will be showing you how to use block design pattern in your flutter application blog stands for business logic component it is a design pattern that helps to separate presentation layer from business logic while at the same time block users provider as its state manager so in today's tutorial we will be using this flutter block package which you can find in pub.dev go to installing and get the latest package dependency and edit in your project in this tutorial I have created a simple counter app that has an increment button and a decrement button and the ontap function for both buttons is empty now which we will create the function using block block is a design pattern therefore it has its own file structure if you look at extensions in vs code you can find out that there is a Blog extension that created by the author of blog Felix Angelov and this extension will definitely help to save up your time if you are experienced with block this is because with this extension you just have to right click and click on blog and enter and it will automatically create a whole block folder structure for you however in today's tutorial we will create each file one by one from scratch together with each implementation without using the extension so that you can have a better understanding on what is happening behind blog firstly we will be creating a Blog folder and in the folder we will have three files which are block file state file and event file event and state files are mainly for state and event initialization while block file is mainly for function implementation so this is the folder structure for Block it will get the same folder structure with using the block extension so now let's start with event file for this counter app we have only two events increment and decrement and both events don't take any parameters so it will just be a simple counter increment and counter decrement class that extends the counter event class if you have events that takes any parameters you should initialize in the class and now we have done initializing our event file next we have to export this file for the use of the block file and this event file should be available for the blog file only so we will be using the part of keyword and the destination file name make sure the name is the same as your block file in the blog folder and we have completely done for the event file next we will be working on the state file state file mainly initialize State variables and in this counter app we just have to keep track of one state which is the count value so in our counter State class we just have to add one integer count variable and whenever in your class you have a parameters you have to create a Constructor and provide a default value so here I will set the default count value as 0. now we have to create a Setter for the state class the setter for the blog state is called copy with this Setter function will take account value and return a new counter State whenever it is executed and this is how we initialize the state file and if you have more than one variables in your state you just have to add in the copy with function and the Constructor until now we have finished our event file and state file initialization now we will work on the Block file the first step in Block file is to import both event file and state file that we have created so for import in flutter we will use the part keyword so there is an underlying area in importing the state file which tells that we might forgot to export the state file so don't forget that you should export both event and state file now the error is gone so for counter block class it should extend block with the counter event and counter state that we have created and here we have to import the flutter block Library so whenever an instance of the counter block is created it should initialize the counter State as well which here in the super keyword we will execute a counter State Constructor next we will be implementing the counter event by using the on keyword followed by the event name so here we have added both events now we will add the implementation for each event for the count increment event we will increment the count value by one and the reason that we wrap the state DOT copy with function with emit function is because admit notify block that a state has changed and the presentation layer should make changes or rebuild the UI according to this admit signal provided by this block instance now we have added implementation for both events until now we have completed initialization and implementation of the block folder lastly we can now add block into our presentation layer so they can communicate before we add block currently this counter application reads account integer variable that created locally and pass through the content widgets to display in the text widget and now we are using block so we don't have to create the variables locally and pass through multiple layers we can now access to the block state or events with the block instance so in order to use block firstly we have to create a blog provider and this provider will create an instance of the counter block through its create function in order to receive the state change emitted by the block event there are a few block listener widget options to choose and in this tutorial I will use block Builder and this block Builder widget should come after block provider widget else you will get an error this block Builder provides a context and a state parameter so in a text widget below that display the count value we can access to the block State count value directly through state DOT count next in the ontap function for the buttons we will now execute block event to call block event we have to use context dot read followed by the Blog name dot add followed by the event name same goes to the increment button so now we have added block event to both buttons and we have replaced the local count value to the state count value to be displayed by the text widget now let's try out in the simulator and as you can see it works perfectly fine which we can increment and decrement the count value and the count value is responsive this is how we use Block in our flutter application here comes to the end of the tutorial if you have any question feel free to comment below don't forget to like the video and subscribe to our Channel see you in the next tutorial

Channel: AI with Flutter

Views: 4,764

Keywords: flutter bloc tutorial, flutter bloc for beginner, flutter tutorial, bloc tutorial, flutter bloc, bloc, bloc pattern, bloc design pattern, flutter state management, state management for flutter

Id: dH42ze0SYyQ

Length: 9min 17sec (557 seconds)

Published: Mon Jun 26 2023