#6 || Flutter Bloc Selector || Flutter Bloc Tutorial

welcome back everyone in this video I will discuss about block selector now block selector widget is used to filter the updates based on the current state of block this is the same project which I have used in the earlier video in the pubspec.eml I have taken this flutter block dependency if I move to main.dot then the material app is wrapped inside block provider which is taking counter block and in the material app I passed home page in the home attribute now this home page is extending the stateless widget and in the scaffold I have taken an app bar having the text as counter block after that in the body I have taken the column widget in the column widget I have taken a row visit and here I have taken two Floating Action buttons one having the icon is plus another one having the icon as minus now whenever the plus will be clicked at that time counter increment event will be filed and if I click on minus then counter decrement event will be fired if I can show you the output then this is the output right now as a first student of the column here I will take block selector so I am taking block selector now in Block selector first of all here I need to specify the type of block so the type of block is nothing the block which I have created that is counter block after that we need to specify the state that is the count of state and the third parameter will be Boolean now in selector which is taking a state here I will check if State DOT counter if its value is greater than equals to 3 then it will return true otherwise it will return false so the initial value of counter is 0 this means it will return false but once the value of counter is greater than equals to 3 it should return true and in Builder which is giving us the context and the state here let me put a semicolon sorry comma and this state is of Boolean type now here I will return a center widget in the center widget as a child I will take container and for this container I will take color and in the color I will write if the state this means this state if this state is true then the color will be colors dot green otherwise the color will be colors.red and for this container I will specify the width and height as well so for this container let me set the width as 200 and let me set the height as 200. now let me save this now if I can show you the output then you can see okay so initially the color of the container is red because the counter value is zero now if I click here then once the value of counter is greater than equals to 3 then the color of the container is changed to Green if I click on minus again the value is changed to Red if I click on plus once again then you can see the value is changed to Green this is how we can use block selector in flutter block that's it for today's video thank you so much for watching

Channel: Ripples Code

Views: 2,857

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 selector, flutter bloc selector exmple

Id: hKbrKCIh6xc

Length: 3min 39sec (219 seconds)

Published: Sun Mar 19 2023