What is BLoC | Flutter BLoC Project

now let's jump in Block in the vast landscape of block architecture blocks emerge as the central figures picture them as conductors in an orchestra harmonizing the different instruments to create a seamless and melodious experience for the audience blocks short for business logic components act as the brains of your application ensuring that data flows smoothly in logic is executed efficiently one of the standout features of block architecture is the clear separation of concerns in this design pattern UI components are responsible for handling the presentation layer they focus on how the application looks and interacts with users on the other hand blocks take charge of the underlying logic that drives the application's behavior this separation Fosters a clean and organized code base making it easier to maintain and scale the application let's break down this concept with a simple example Le a counter app in this scenario we'll have a UI component that is the counter screen and a block is counter block to manage the business logic so let's start doing some code magic so first add the flutter block dependency inside our flutter app so from here copy this line and paste it inside the pubspy yaml file then tap on this Pub get option now come in this main. Dart file so first let's create an abstract event class as counter event then create two different classes for different events so here create a event class as increment event and this class will extends are this counter event class now create the same class for decrement event now let's first create a counter block class and this class will extends block now here we need to add the event and return type so here add counter event and then int now add the default Constructor and add the default value of the counter now here we need to overwrite a method which will helps to map these events to the states so here let's override the map event to State method now our this method will return the stream of input numbers and I guess you have seen this first time async with a asterisk symbol so we have this asterisk symbol with async because here we need to listen these events continuously that is why we have used this symbol with async now inside this method first add the if condition for checking the events like here if the received event is increment event then we need to add one in the state value now we need to yield this value so you may ask what is this yield so yield is used for emitting the values for this sequence so this means emit this value now and continue when more values are ready now come in this L statement and do the same for for decrement state now that was it for setting up the blocks now let's Implement them now come in this my app class and wrap the parent widget with block provider and and assign the counter block to its create State now come inside this my homepage section and here create a new Final variable as counter block and assign the counter block from the context and now from here remove this text widget and here add block provider then add our block and the return type then inside it add the Builder call back and then pass the context and count data then from here we need to return the count value so for doing that here add the text widget then add this count value now come in this increment Floating Action buttons on pressed method then from here add the increment event to the counter block and then do the same for decrement event like add this decrement event to the counter block now let's save the code and run the application now if you press on any of these events then the state of our app changing and it's listening to these events in this example the block takes care of the business logic responding to events and updating the state accordingly the UI remains focused on presenting the current count and interacting with the user this separation of concerns enhances maintainability scalability and testability making block architecture a powerful pattern in flutter development so this was it for the block now let's jump in cubits

Channel: Widget Wisdom

Views: 528

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: 1fUeM_dw2k4

Length: 4min 34sec (274 seconds)

Published: Thu Feb 08 2024