Flutter BloC Pattern (Create, Read, Update & Delete)

it would be wonderful if you could easily maintain and update the state of your application it is where flutter block comes in it allows you to decompose your app State into smaller well-defined State machines that transform events into 0 1 or multiple states do you want to learn flatter in a better and faster way then simply join our 12-week flutter training on heyflatter.com where you master all the flutter topics such as start UI design State Management Firebase clean architecture databases and so on by watching our structured courses that help you for each topic to go from a newbie until an expert level in flutter let's get started to use Block in our flutter app we need to add flutter block package in our perspect.aml file let's try to understand in simple words how flutter block works so there are three things block event and state first we trigger the event let's save we trigger the add user event now what happens is the event emits this State according to our Logic for example if the user edits successfully then it emits the state user edit else it will emit the state user not added now let's use Block in our app first we will create a user model where you can see we have properties like Name ID email and now we create three files for the user list block let's create user list event.dot and make it a part of user list block dot dot using part of mix many files to be treated as if they were one file here you can see we have created an immutable abstract class that is user list event after that we created add user class with the property user and this class extends our user list event after that we created delete user class with property user and this class also extends our user list event after that we created update user class with the property user which also extends our user list event these three classes are basically the events that we are going to trigger later in our app to add update and delete users now let's create user list State dot dot and make it a part of user list block dot dot here you can see we have created an immutable abstract class that is user list state which has the property users that is the list of type users after that we created two classes that is user list initial class that extends our user list State class and the user list updated class that also extends our user list State class these classes are basically the states that we are going to emit later from our events and finally we created user list block dot dot and make it a part of user list even.dot and user list State dot dot here you can see we have created the user list block class it is using the super keyword to call the Constructor of block class and pass it an initial state of user list initial with an empty list of users our Constructor also registers the event handlers for the add user delete user and update user events using the on map method provided by the block class the on method takes an event type and a callback function that is called when an event of that type is dispatched to the user list block now here we have created the callback for the add user event that is a method named add user which takes two parameters that is add user event and an emitter object that is used to emit a new state the add user method adds the user object passed with the add user event to the current states list of users after that it just emits a new state of user list updated with the updated list of users by using the emit method provided by the block class now here we have created the callback for the delete user event that is a method name delete user which also takes two parameters that is delete user event and an emitter object that is used to emit a new state the delete user method deletes the user object passed with the delete user event to the current state list of users after that it just emits a new state of user list updated with the updated list of users and at last we have created update user callback for the update user event that is a method named update user which also takes two parameters that is update user event and an emitter object that is used to emit a new state the update user method Loops through the current states list of users and updates the user object with the matching ID to the new user object passed with the update user event after that it just emit a new state of user list updated with the updated user in the list now to use the user list block we have to wrap our material app in multi-block provider and add our user list block now in our widget build function of homepage dot dot we have used a block Builder widget block Builder take two parameters the first one is the type of block and the second one is the type of state that the block emits block Builder rebuilds its child widget tree whenever the state of the block changes it takes a builder function as a parameter which is called whenever the state of the block changes the Builder function takes 2 parameters a build context object and a state of the Block in our block Builder widget we check if the state is the instance of user list updated and users list is not empty we assign the user's list from the state object and then return a list view Builder to display a list of users and if the state is not an instance of user list updated or the users list is empty it displays a message indicating that no users were found here we have returned a build user tile widget that we have created to display each user this is our build user tile widget that simply returns a list Style with the title of username subtitle of user email and the trailing with the raw that contains two icon buttons one to delete the user and second to update the user the onpress Callback function of the icon button for deleting the user sends a delete user event to the user list block with the user object as an argument this removes the user from the list of users while the onpressed Callback function of the icon button for editing the user's information equation sets the name and email text editing controllers to the values of the user's name and email properties respectively then it calls the show bottom sheet function with the is added parameter set to true to edit the user's information here you can see a model bottom sheet which takes three parameters that is contacts is added and ID here we have called a function name build text field that simply returns a text wrapped by a padding widget after that you can see we have created an elevated button widget with an onpressed callback function that creates a new user object using the text values of two text editing controllers that is name email and an ID and then adds or updates the user through the user list block based on the value of easy edit variable if the is added variable is true it updates the users otherwise it adds the user to the user list finally it pops the current contacts from the navigation stack after that here you can see we have created a floating action button to add a new user to our list we have created two variables that is state which has been assigned to the current state of the user list block and ID which would be the ID of new user which is basically one greater than the length of users after that again we are showing a model bottom sheet this time our bottom sheet will add a new user as we have not given is added parameter and it is false by default so instead of updating an old user we are adding a new user to our list of users now here you can see if I add Mark it will be added to our user list if I remove this user it will be removed from our users list [Music] foreign [Music]

Channel: HeyFlutter․com

Views: 30,826

Keywords: bloc architecture, bloc dart, bloc flutter, bloc in flutter, bloc pattern, bloc pattern flutter, bloc pub dev, easiest way to learn bloc, flutter bloc, flutter bloc crud, flutter bloc crud example, flutter bloc example, flutter bloc package, flutter bloc pattern, flutter bloc pattern example, flutter bloc pattern tutorial, flutter bloc state management, flutter bloc tutorial, flutter state management bloc

Id: rVI6IR1JiVA

Length: 7min 44sec (464 seconds)

Published: Sun Jun 18 2023