Logo

dev-resources.site

for different kinds of informations.

Flutter Design Pattern Bussines Logic Component (BLOC)

Published at
1/11/2025
Categories
dart
flutter
mobile
android
Author
Sukma Rizki
Categories
4 categories in total
dart
open
flutter
open
mobile
open
android
open
Flutter Design Pattern Bussines Logic Component (BLOC)

BLoC (Business Logic Component) Design Pattern
Purpose: The BLoC (Business Logic Component) design pattern is used to separate business logic from the UI in Flutter applications, making the code more maintainable and testable. It utilizes streams to manage state and makes the app reactive.

Core Concepts:

Events: Inputs to the BLoC that represent actions or triggers, such as button clicks or user inputs.
States: Outputs from the BLoC that represent the current state of the application or UI.
Streams: Used to manage the flow of data. Events are added to a stream, processed by the BLoC, and result in new states emitted through another stream.
Benefits:
Separation of Concerns: Keeps business logic separate from UI code.
Reusability: Business logic can be reused across different parts of the application.
Testability: Business logic can be tested independently of the UI.
Reactive Programming: Makes the app responsive and able to handle asynchronous data streams.
Example Code:
Let’s create a simple counter app using the BLoC pattern.

Step 1: Define Events

Image description
Step 2: Define States

Image description

Step 3: Create the BLoC

Image description

Step 4: Connect BLoC to UI

Image description
Image description
Image description

This example demonstrates a simple counter application where the BLoC pattern is used to manage the state. The CounterBloc listens for Increment and Decrement events and updates the counter state accordingly. The UI subscribes to the state stream and updates the display when the state changes.

Featured ones: