[go: up one dir, main page]
Scribd
Upload
11 views5 pages

Cubit BLoC

Cubit is a simplified state management solution in Flutter, offering a lightweight alternative to BLoC without the complexity of events and streams. It allows direct method calls to manage state, making it easier to implement and understand, particularly for small to medium-sized applications. Key benefits include simplicity, less boilerplate code, and improved testability, making it ideal for developers seeking an efficient way to manage state.

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
11 views5 pages

Cubit BLoC

Cubit is a simplified state management solution in Flutter, offering a lightweight alternative to BLoC without the complexity of events and streams. It allows direct method calls to manage state, making it easier to implement and understand, particularly for small to medium-sized applications. Key benefits include simplicity, less boilerplate code, and improved testability, making it ideal for developers seeking an efficient way to manage state.

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 : #flutter #coding
references : BLoC
▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
▲▼▲▼▲▼
Cubit in Flutter: A Simplified Approach to State Management

Cubit is a lightweight and streamlined alternative to BLoC (Business Logic Component) in


Flutter. It is part of the flutter_bloc library and provides a simpler way to manage state
without the complexity of events and streams. Cubit is ideal for developers who want the
benefits of BLoC but prefer a more straightforward implementation.

Core Concepts of Cubit


1. State:
Similar to BLoC, Cubit manages state. States represent the app's condition at a given time
(e.g., loading, success, error).
2. Cubit:
A Cubit is a class that holds the current state and exposes methods to emit new states.
Unlike BLoC, it doesn't use events—instead, you directly call methods on the Cubit to
trigger state changes.
3. Emit:
The emit method is used to update the state. When a new state is emitted, the UI rebuilds
to reflect the changes.

How Cubit Works


4. The UI calls a method on the Cubit (e.g., increment or fetchData ).
5. The Cubit performs the necessary logic (e.g., updating a counter, making an API call).
6. The Cubit emits a new state using the emit method.
7. The UI listens to the state and rebuilds accordingly.
Key Benefits of Cubit
Simplicity: No need to define events or deal with streams, making it easier to implement
and understand.
Less Boilerplate: Fewer classes and less code compared to BLoC.
Reactive Programming: Still leverages reactive state management for real-time updates.
Testability: Business logic can be tested independently of the UI.
Scalability: Suitable for small to medium-sized apps or specific features within larger apps.

Cubit Workflow
8. Define States:
Create classes representing the app's state.

abstract class CounterState {}


class CounterInitial extends CounterState {}
class CounterUpdated extends CounterState {
final int count;
CounterUpdated(this.count);
}

9. Implement the Cubit:


Create a Cubit class with methods to update the state.

class CounterCubit extends Cubit<CounterState> {


CounterCubit() : super(CounterInitial());

void increment() {
final currentCount = (state is CounterUpdated) ? (state as
CounterUpdated).count : 0;
emit(CounterUpdated(currentCount + 1));
}

void decrement() {
final currentCount = (state is CounterUpdated) ? (state as
CounterUpdated).count : 0;
emit(CounterUpdated(currentCount - 1));
}
}
10. Integrate with UI:
Use BlocProvider to provide the Cubit and BlocBuilder to listen for state changes.

class CounterApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => CounterCubit(),
child: MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Cubit Counter')),
body: BlocBuilder<CounterCubit, CounterState>(
builder: (context, state) {
final count = (state is CounterUpdated) ? state.count : 0;
return Center(
child: Text('Count: $count'),
);
},
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () => context.read<CounterCubit>().increment(),
child: Icon(Icons.add),
),
SizedBox(height: 10),
FloatingActionButton(
onPressed: () => context.read<CounterCubit>().decrement(),
child: Icon(Icons.remove),
),
],
),
),
),
);
}
}

Cubit vs. BLoC


Feature Cubit BLoC
Complexity Simpler, less boilerplate More complex, requires events
State Updates Direct method calls Event-driven
Use Case Small to medium apps Large, complex apps
Learning Curve Easier to learn Steeper learning curve
Flexibility Less flexible More flexible

When to Use Cubit?


Small to medium-sized apps.
Features with straightforward state transitions.
Developers who prefer simplicity over flexibility.
Apps where BLoC might be overkill.

Best Practices
Keep Cubits Focused: Each Cubit should handle a specific feature or functionality.
Use Immutable State: Ensure states are immutable to avoid side effects.
Leverage Equatable : Simplify state comparison by overriding == and hashCode .
Combine with BLoC: Use Cubit for simple features and BLoC for complex ones within the
same app.

Example Use Cases


Counters: Simple state management for incrementing/decrementing values.
Toggle Buttons: Managing on/off states.
Form Validation: Handling form input and validation logic.

Conclusion
Cubit is a powerful yet simple state management solution for Flutter apps. It offers many of the
benefits of BLoC (e.g., separation of concerns, testability) without the added complexity of
events and streams. For developers looking for a lightweight and efficient way to manage state,
Cubit is an excellent choice. It’s particularly well-suited for small to medium-sized apps or
specific features within larger apps. 🚀

You might also like