BLoC State Management in Flutter | flutter_bloc | Implementing BLoC Architecture In Flutter

in this tutorial we will study how to manage State using block flutter block is a state management library for flutter applications that follows the block business logic component design pattern it helps manage the state of your application by separating the business logic from the UI layer with flutter block you can handle complex State changes update UI components and manage a synchronous operations efficiently it provides a clear separation of concerns making your code base more maintainable and testable in this tutorial we will explore two types of examples first we'll delve into the block design pattern method then we'll examine how to use the flutter block dependency while block and flutter block are related Concepts they refer to different things block is a design pattern for managing State and handling business logic in flutter applications it separates the presentation layer UI from the business logic and State Management making the code more modular and easier to maintain block can be implemented using various libraries or even plain Dart without relying on any specific package flutter block is a popular state management library for flutter that implements the block pattern it provides utilities and classes to simplify the implementation of block architecture in flutter applications flutter block provides tools like block block provider block Builder block listener Etc to create and manage blocks effectively it offers features such as State Management event handling and stream based communication between components in summary block is a design pattern while flutter block is a library that helps developers implement the block pattern in flutter applications more easily first we'll explore how to implement a simple example using the block method then we'll proceed to utilize the flutter uncore block dependency create a blank flutter project create a new dart file then add a class inside it with the class name counter block we are developing a simple project to increment and decrement values using this block declare a local variable named counter declare another stream controller variable named counter stream controller D async is imported the data type is integer stream controller is a fundamental class used for working with asynchronous data streams it serves as a source of data that can be listened to and consumed by various parts of your application then create a stream sync get stream sync is an interface provided by the dart async library that represents the input side of a stream controller it allows you to add data errors or close the associated stream then create a stream getter named counter stream in flutter a stream is a sequence of asynchronous events or data it represents a source of asynchronous data that can be listened to and processed by various parts of your application then create three functions for incrementing and decrementing the counter variable and disposing the controller then the variable is added to the sync open the main. dart file import the created counter block do. file then create an instance of the counter block class create a dispose function and call the dispose function from the counter block class then add a stream Builder widget inside the body the type is integer include the required parameter stream and call our counter block stream set the initial data to zero add another required parameter Builder which includes the user interface designs in here that interact with our business logic using block return a column include a text widget for displaying the current counter value display the value using snapshot. dat then create a row to include buttons for incrementing and decrementing add an elevated button text should be increment call the increment counter function in the onpressed event then copy and paste for another decrement button change the text and function accordingly then run the app it's working very well now we are moving to another method for using the flutter uncore block dependency for that we remove all the current code and start with a fresh project we need the flutter block package so search for it and find it to install it copy the dependency and paste it into the pubp do yaml file then press the pub get button next create a dart file and import the dependency create an abstract class counter event then create three more classes for increment decrement and reset these classes should extend from the counter event class create a class that extends from block set up a Constructor to create an instance of the counter block class call The Constructor of the super class of counter block passing zero as the initial State value registered the handlers for our events these handlers will handle incrementing decrementing and resetting events by updating the state accordingly e next open the main doart file import the flutter uncore block package and the countercore block. dart file wrap the homepage widget with the block provider passing the counter block as a parameter move to the build method and create a block provider inside the body widget create a column add a block Builder widget inside the column the Builder should return a text widget that displays the counter value e next add a row and include three buttons inside it for incrementing decrementing and resetting the value e e call all our events on the onpress event finally run the app everything is working perfectly these are the methods of State management using block thank you for watching

Channel: True Coders

Views: 92

Keywords: block state, block state management, flutter block, state management flutter bloc

Id: z_IaRpGLJ4w

Length: 18min 9sec (1089 seconds)

Published: Sat Apr 13 2024