Flutter Bloc Tutorial For Beginners - Package

this is how to use the flutter block package with flutter and this is the flutter pizza application we will create with blood the first thing we need is inside the pub spec.yam we will need to add under the dependencies the flutter block and the equitable package this one will be used to compare the states of the flutter block we also need to add the image folder inside the assets now you can run flutter pubget and next is to create an image folder with the pizza peperoni and the pizza image after we will create a model folder and inside we will have the pizza model the dart file i also want to tell you that we have a new advanced flutter course all the information is in the description but more on this later for the pizza model we import the material.dart and we create the class pizza this one will have an id a name and an image with this we can create the named constructor and add the equitable package we can now extend the pizza class with the equitable and to use it we just have to overwrite get the props with a list of id name and image this will be used to compare the state of the block later inside this pizza class we will also create a list of pizza the first pizza inside the list will have an id 0 named pizza and image pizza the next one will have the id1 the name pizza peperoni and the image pizza pepperoni the pizza model is now completed after you will need to go inside your extension and add the block extension we will go back inside our file and we will create under the library a new block this one will be called pizza and i will press enter and this is why we use the extension block because this will create everything for us we will start working on the state then the event and finally on the block.dart so let's go in the pizza state right now first i need to give you a visual explanation of what will happen we will have two states one to initialize the block app call it the pizza initial and want to display the pizza counter this one will be called the pizza loaded and we will have also three events the first one is called load pizza counter and it's to change the state from the pizza initiate to the pizza loaded the second event is called add pizza and it's to add a pizza on the screen and the third event is called remove pizza the first state will be the pizza initial and then we will create another state called pizza loaded this one will have access to the list of pizza which is the pizza and the pizza pepperoni and we create the name it constructor that required the list of pizza we also need to create the override get prop because of the equitable package if you don't do this block will not be able to compare the states now we can go over pizza and we can quick fix and import the pizza model the import is not available in this file but in the pizza block for the pizza event.dart file we will create three event the first one is the load pizza counter the second one is to add a pizza and the third one is to remove a pizza and they all extend the pizza event for the add pizza we will create a final pizza with a constructor and the add override get props from the equitable package and even the auto-generated code from the block extension use the equitable package the remove pizza will be just the same we have the pizza and the constructor with the override get props from the equitable package as a reminder this will be used to compare the state of the block einstein said one day if you like the teaching style please like but don't subscribe now we are ready to work on the pizzablock.dart in the pizza event.dart file we have created three different event and these are the one that we will use instead we will say on load pizza counter which is the first event we have created the on add pizza and the on remove pizza these are the three events we have created earlier when we will start the application the first event will be the load pizza counter this one inside will have an await then we will use the future.delay to wait for one second and then we will emit a new state which is the pizza loaded inside we give an empty list of pizza okay so in more simple words this is what happened when we start the application the pizza initial state is trigger then the load pizza counter event will start then we'll emit a new state and this new state will be the pizza loaded in this example we only have two state the pizza initialize and the pizza loaded but you could have a third state to display an error page in the screen when you have one now for the add pizza event we will say if the state is pizza loaded then we will create a final state and this one will be equal to this dot state as a pizza loaded we will need to use the state inside the next step we can now emit a new state and this one would be the pizza loaded but we will change the pizza list inside we will use the previous list of pizza by using the state and we will add an event pizza in other words this will create a new state and add a pizza in the screen now we will do the same thing but for the remove pizza so when the remove pizza event is triggered this is what will happen again we use the same logic as the add pizza we say if the state is a pizza load then we create a final state equal to state as a pizza loaded we will then emit a new state this new state will still be a pizza load but the list of pizza inside will be different we will use the previous list of pizza and we will remove one pizza it's now time to use the blog by creating a ui my friend musk thinks you should know these four things to become a flutter advanced developer and you can find free previews of this topic on fluttermap.com this is actually the best advanced flutter course in the world you can verify by yourself all the information is in the description inside the main.dart file i will wrap the material app with the multi-block provider the argument provider will need a list of provider and inside we will use the block provider this one need a create argument to create a provider we then use the context to return the pizza block that we have created in this video and as soon as we create this pizza block we will create also an event which will be the load pizza counter event if you remember this event will trigger the pizza loaded state inside the center of the body we will create a child called the block builder this one need a block which is the pizza block and a state which is the pizza state we need also to create a builder argument inside we have the context and the state and we will create conditions so if the state is the pizza initialize which is the first state triggered by the pizza block then we will return a circular progress indicator if the state is the pizza loaded then we will return a column inside we will have a text and we will use the state.list of pizza dot length this will show us how many pizza is there on the screen and we give a style for the text after we create a sized box and another one that will stack the list of pizza to create the children which is all the pizza we will create a for loop that will generate the number of pizza from the state list of pizza and every widget will be a positioned widget with the image of every pizza in the list in the condition we also have a else that will return a text something went wrong and this will be display if it's neither one of the two state we can now create our floating action button and when we press on the button this is how we can add pizza into the screen we first use the context to read the pizza block and then we add an event the event will be add pizza inside we just give the pizza that we want to add in this case it's the normal pizza we can do the same thing to delete the pizza but this time we use the event remove pizza and we remove the same one but if you want to add the pepperoni pizza you will need to use the event add pizza but this time inside you put the pepperoni pizza and finally to delete the pepperoni pizza you will remove the pizza which is the peperoni one in this example we have used the blog builder which is the most simple but if you want to know about block provider listener and consumer you can check the complete flutter block tutorial on the channel max on flutter you also create end-to-end app development always using block this flutter block example was actually made by maxon flutter and i do think it's a great channel so to learn more about block you can click on this video that's it for this one bye [Music]

Channel: Flutter Mapp

Views: 105,083

Keywords: Flutter, bloc, flutter bloc, flutter bloc tutorial, flutter bloc state management, flutter mapp, flutter state management bloc, state management bloc flutter, bloc flutter, bloc flutter package, flutter bloc package, flutter tutorial bloc, flutter bloc for beginners, flutter bloc tutorial for beginners, flutter tutorial, google flutter

Id: Ep6R7U9wa0U

Length: 8min 33sec (513 seconds)

Published: Thu Mar 10 2022