BLoC vs Cubit: Unraveling the Secrets of State Management in Flutter

Yusuf Biberoğlu
3 min readNov 24, 2023

--

Cubit and Bloc are two approaches to state management in Flutter and are part of the Bloc library. Both offer reactive solutions for state management in Flutter applications, but there are some key differences between them.

BLoC (Business Logic Component)

  • Definition: Bloc aims to create more testable and sustainable applications by separating business logic and state management.
  • Event-Based: Bloc distinguishes between events and states. Developers define events that are triggered in response to user interactions or other inputs.
  • More Complex: Bloc may be more suitable for larger and more complex applications. This is because the separate handling of events and states allows for more detailed management of interactions between different parts of the application.
  • More Boilerplate Code: Using Bloc typically requires more boilerplate code. Extra classes and functions must be defined for events, states, and their processing.

Cubit

  • Definition: Cubit is a simpler version of Bloc, allowing for state management with less boilerplate code.
  • Function-Based: Cubit adopts a function-based approach instead of an event-based one. States are updated directly through functions, making the code more readable and manageable.
  • Suitable for Simpler Applications: In small or medium-sized applications, the Cubit approach may be sufficient and offer a faster development process.
  • Less Boilerplate Code: The use of Cubit typically requires less boilerplate code. Methods are defined for direct state updates, making the code simpler.

General Differences

  • Complexity: Bloc may be more suitable for more complex applications, while Cubit is ideal for simple and fast solutions.
  • Amount of Code: Bloc generally requires more boilerplate code, whereas Cubit offers functionality with less code.
  • Approach: Bloc adopts an event-based approach, whereas Cubit works with direct state updates.

In conclusion, the choice between Cubit and Bloc depends on the complexity of the application, the speed of the development process, and the preferences of the developer. Cubit may be more suitable for small and simple applications, while Bloc could be better for larger and more complex applications.

Structure — Cubit

Cubit is a simpler state management solution used in Flutter. It typically consists of a Cubit class and associated state classes. The file structure for a Cubit typically looks like this:

1. Cubit Class (my_cubit.dart):

  • Manages and updates the states.
  • Usually alters the state through simple functions.

2. State Classes (my_state.dart):

  • Define the states that are managed by the Cubit.
  • Typically simple Dart classes.

Structure — BLoC

Bloc is used for more complex state management scenarios in Flutter. The Bloc structure typically involves three main components: Bloc class, Events, and States.

1. Bloc Class (my_bloc.dart):

  • Listens to events and updates states based on these events.
  • Usually contains a mapEventToState method.

2. Events (my_event.dart):

  • Represent inputs to the Bloc like user interactions or system events.
  • Typically defined as Dart enums or classes.

3. States (my_state.dart):

  • Represent the state of the application at any given time.
  • Typically defined as Dart classes.

--

--

Yusuf Biberoğlu
Yusuf Biberoğlu

Written by Yusuf Biberoğlu

Software Developer 💻 (PHP-Symfony, Flutter, Dart, Firebase) https://www.linkedin.com/in/yusufbiberoglu/

No responses yet