#7 || Multi Bloc Provider || Flutter Bloc Tutorial

welcome back everyone in this video I will discuss about multi-block provider this is a simple counter block project if I click on plus then the value is incrementing if I click on minus then the value is decrementing this project I have already discussed in my flutter block playlist now my requirement is that here I will create a container having the color as color dot purple if I click on plus then the color will be changed to Green if I click on minus then the color will be changed to Red along with incrementing the text counter value okay this means here we need two blocks one for incrementing the value and another one for changing the color let me show you how to do that first of all in the lift folder I will create another folder named as color block inside this color block here I will create two files one is color State dot dot and I will create one more file named as color block now I will copy the code from counter state to color state and I will change the name from counter state to color state OK and here I will declare let me copy this and paste it here here instead of counter I will declare a variable color and I will initialize it with the m initialize with with the initial value colors dot purple let me import the package fine and now from counter I will change it to color now instead of counter initial State let me change it to color initial state and it will extend color state let me copy this and instead of counter here it will be color and instead of a 0 again I will initialize it with colors dot purple now instead of counter increment State here I will change it to color increment state it will extend what it will extend the color state and instead of inch increased counter here I will pass color let me change it to increased color and here it will be color and it will be increased color fine similarly here I will change it to color decrement state it will extend color state and let me copy this paste it here I will change it to color and instead of decreased counter I will change it to decreased color it will be color and it will be decreased color this is the code for color state similarly from the counter block I will simply copy this code and I will paste it to color block now there is no need of this dot dot developer pane now here this is not required instead of counter block I will change its name to color block and now it will not be counter event it will be sorry it will be counter event but instead of counter State here I will change it to color state and it will be color block let me import counter event now instead of counter initial State here I will change it to color initial state and instead of counter increment State here I will pass color increment state and when the color will be incremented then instead of state DOT counter dot plus here I will change the color to colors.green because as I told you that whenever the plus button will be clicked then the color will change to green and to use this colors I need to import the material.dot similarly here instead of counter decrement event I will use color decrement State and here I will pass the color as colors dot red so in the color block I have created these two files color block and color State now let me move to main dot dot now here I need to use two block providers one for counter block another one for color block there are two approaches either we can Nest this block provider or we can use multi-block provider now what is this multi-block provider it combines the functionality of numerous block provider into a single widget it increases the readability of the code that's why here I will use multi block provider how to do that let me show you so here in return I will use multi block provider and this provider will take a array to this array first of all I will use this block provider let me cut it from here paste it here now there is no need of this semicolon put a comma here so in this block provider which is taking counter block and in the create I have passed counter block and there is no need of using this child here what I will do I will cut this and I will paste it here there is no need of child okay let me cut it from here and paste it here fine now here I need to put a semicolon now this block provider is for counter block similarly I need to use the color block as well so let me copy this paste it here now instead of counter block here I will use color block sorry it will be color block and in create I will pass this color block and to this multi block provider which is taking a child here I have passed material app and in the home I have passed home page now in the home page as a first child here again I will use this block Builder and instead of text here I will use container and to this container in the color I will pass and here I need to change this block Builder now it will take color block and color state so in this color I can pass State DOT color so this will take the initial color this means by default the color of the container will be purple correct and let me specify a width and height of container let me give it as 200 and let me specify the height as 200 that's it let me save this ok fine now whenever this plus button will be clicked along with this I need to use context dot read here it will be color block and similarly whenever the minus button will be clicked at that time I need to use color block here fine now let me save this now let me show you the output as you can see by default this container is generated having the initial color as purple if I click on plus then you can see counter value is incrementing and the color has been changed to Green if I click on minus then the color is changed to red and the counter value is decrementing if I click on plus once again then you can see the color is green and the counter value is incrementing this is how we can use multi block provider now if you don't want to use multi block provider then instead of this multi block provider we can Nest the block provider let me show you how to do that let me comment this and here I will use block provider and to this block provider here I will specify the type of block that is counter block fine and in create which is taking context here again I need to call counter block and to the child again I will use block provider but this time instead of counter block here I will use color block and increate here I will pass color block and to the child I will use const material app this so let me copy this paste it here and here I need to put a semicolon fine now let me do a hot restart ok so initially the color is purple if I click on plus then you can see counter value is incrementing and the color is changed to Green if I click on minus and the counter value is decrementing and the color is changed to Red this is how we have actually this is how we can achieve the same functionality without using multi-block provider but the readability of the code has been decreased so if we use multi block provider then we can combine multiple block provider into a single widget which improves the readability of the code that's it for today's video thank you so much for watching

Channel: Ripples Code

Views: 4,140

Keywords: flutter bloc tutorial, flutter bloc complete tutorial, flutter bloc tutorial step by step, flutter bloc tutorial series, flutter bloc by ripples code, flutter bloc tutorial for begineers, flutter bloc, what is flutter bloc, latest flutter bloc tutorial, flutter bloc tutorial guide, advance flutter bloc tutorial, flutter bloc from scartch, flutter bloc multiproviderbloc, flutter multiprovider bloc example

Id: zSwg7hnbZlo

Length: 11min 39sec (699 seconds)

Published: Mon Mar 20 2023