Scribd
Upload
13 views5 pages

Block Family

Bloc is a state management pattern in Flutter that separates business logic from UI code, enhancing maintainability and testability. The Bloc family includes components like BlocProvider, Bloc, BlocBuilder, BlocListener, and BlocConsumer, each serving specific roles in managing state and UI updates. Together, these components facilitate a structured approach to handling events and state changes in Flutter applications.

Uploaded by

ismailovich1904
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views5 pages

Block Family

Bloc is a state management pattern in Flutter that separates business logic from UI code, enhancing maintainability and testability. The Bloc family includes components like BlocProvider, Bloc, BlocBuilder, BlocListener, and BlocConsumer, each serving specific roles in managing state and UI updates. Together, these components facilitate a structured approach to handling events and state changes in Flutter applications.

Uploaded by

ismailovich1904
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼

▲▼▲▼▲▼
tags : #coding #flutter
references : BLoC
▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
▲▼▲▼▲▼

What is Bloc?
Bloc (Business Logic Component) is a state management pattern in Flutter. It helps separate
business logic from UI code, making your app more maintainable and testable. Instead of
having the UI directly control how the data changes, Bloc acts like a middleman. You send an
event to the Bloc, and the Bloc handles the logic and sends back a new state.

The Bloc family is basically a group of tools that all work together to make this happen.

The Bloc Family


1. BlocProvider
What is it?
BlocProvider is like the parent that provides the Bloc to the widget tree. It creates the
Bloc and makes it available to all its child widgets. You can think of it like a manager in
an office who hands out tasks to the employees (other widgets).
How it works?
You wrap your widgets with BlocProvider and tell it which Bloc to provide. The Bloc
stays alive as long as the widget tree is alive (or until you explicitly dispose of it).
Example:

BlocProvider(
create: (context) => TransactionCubit(),
child: TransactionScreen(),
);

Here, TransactionCubit is the Bloc, and TransactionScreen will have access to it.
2. Bloc
What is it?
A Bloc is the brain of your app. It receives events and processes them to produce new
states. It doesn't have any UI logic; it only deals with the business logic.
How it works?
You create a Bloc class (like TransactionCubit ) that extends Cubit or Bloc . This
class defines states and events and provides logic for how to update the state when an
event happens. Example:

class TransactionCubit extends Cubit<TransactionState> {


TransactionCubit() : super(InitialTransactionState());

void addTransaction(Transaction transaction) {


// Handle logic to add a transaction
emit(TransactionAddedState());
}
}

3. BlocBuilder
What is it?
BlocBuilder is like the watcher. It listens for changes in the state of your Bloc and
rebuilds your UI whenever the state changes. If the Bloc sends a new state,
BlocBuilder will automatically rebuild the widget based on that state.
How it works?
You use BlocBuilder to build the UI based on the current state of the Bloc. It listens
for state changes and rebuilds the widget when necessary. Example:

BlocBuilder<TransactionCubit, TransactionState>(
builder: (context, state) {
if (state is TransactionAddedState) {
return Text('Transaction Added');
}
return CircularProgressIndicator();
},
);

4. BlocListener
What is it?
BlocListener is like the reactor. It listens for state changes, but instead of rebuilding
the UI, it can perform side effects (like showing a dialog, navigating to a new screen,
etc.). It listens to events that need to trigger an action.
How it works?
You use BlocListener when you want to react to state changes but don’t need to
rebuild the UI. Example:

BlocListener<TransactionCubit, TransactionState>(
listener: (context, state) {
if (state is TransactionAddedState) {
// Show a success message or navigate to another screen
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:
Text('Transaction Added')));
}
},
child: Container(),
);

5. BlocConsumer
What is it?
BlocConsumer is a combination of BlocBuilder and BlocListener . It lets you listen
to state changes and build the UI in the same widget. If you need both logic (side
effects) and UI updates in one place, BlocConsumer is your go-to.
How it works?
It provides both a listener and a builder in one widget, making it a powerful tool for
handling state changes. Example:

BlocConsumer<TransactionCubit, TransactionState>(
listener: (context, state) {
if (state is TransactionAddedState) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:
Text('Transaction Added')));
}
},
builder: (context, state) {
if (state is TransactionAddedState) {
return Text('Transaction Added');
}
return CircularProgressIndicator();
},
);
How They All Work Together
6. BlocProvider provides the Bloc.
7. Bloc listens for events and handles the business logic.
8. BlocBuilder listens for state changes and updates the UI accordingly.
9. BlocListener listens for state changes to trigger side effects (e.g., navigation, showing
alerts).
10. BlocConsumer combines BlocBuilder and BlocListener when you need both UI
updates and side effects in one place.

Example in Practice:
Let's say you have a button that adds a transaction:

11. User clicks the button → This triggers an event in your Bloc (e.g., addTransaction ).
12. The Bloc receives the event and processes the logic.
13. The Bloc emits a new state (e.g., TransactionAddedState ).
14. BlocBuilder listens for the state and updates the UI (e.g., show "Transaction Added").
15. BlocListener reacts to the state change by showing a SnackBar with a success message.

Conclusion
So, BlocProvider sets up your Bloc, the Bloc manages the state, BlocBuilder updates the UI,
and BlocListener does side effects. BlocConsumer brings the best of both worlds—UI
updates and side effects—into one widget.
Sure! Here's a big table that highlights the differences between the various Bloc components:

Component Description Usage When to Use Side Effects UI Upd


BlocProvider Provides the Wrap your When you No direct Doesn’
Bloc to the widget tree need to side effects; update
widget tree. with instantiate just ensures directly
It's the parent BlocProvider and provide that the Bloc to injec
that creates to provide a a Bloc to a is available Bloc int
and makes the Bloc to child part of the to its widget
Bloc available. widgets. widget tree. descendants.
Component Description Usage When to Use Side Effects UI Upd
Bloc Holds Create a Bloc When you Emits new Doesn’
business logic, class and need to states based directly
listens to define events manage the on business interact
events, and and states in it. logic and logic. the UI b
emits new state of your control
states. The app the UI
brain of your independently display
app. from the UI. emitting
states.
BlocBuilder Listens for Wrap the UI When you No side Automa
changes in the you want to need to effects; only update
Bloc state and rebuild with rebuild parts rebuilds the UI whe
rebuilds the BlocBuilder . of the UI UI based on a new s
widget when when the the new is emitt
the state state changes. state. the Blo
changes.
BlocListener Listens to Wrap a widget When you Handles Does n
state changes with need to side effects rebuild
and performs BlocListener perform side like UI; inst
side effects to trigger effects like navigation, reacts t
(like actions based showing showing state
navigation, on state messages, SnackBars, change
showing changes. navigation, or or calling triggers
SnackBars, interacting APIs when a actions
etc.). with external state
systems. changes.
BlocConsumer Combines Use When you Can trigger Rebuild
BlocBuilder BlocConsumer need both UI side effects and ca
and when you updates and (like trigger
BlocListener need both side side effects navigation, effects
to both build effects and UI in response SnackBars) widget.
UI and trigger updates in the to a state and also
side effects in same widget. change. rebuild the
the same UI based on
place. the state.

You might also like