DOCSEARCHbyAlgolia
Submit Docs

BLoC State Management

repository·master·Indexed 11 days ago

https://github.com/felangel/bloc

A predictable state management library for Dart and Flutter used to separate business logic from the presentation layer. Includes Mason bricks for scaffolding Blocs, Cubits, HydratedBlocs, ReplayBlocs, and full Flutter features.

Tokens
63.7K
Snippets
213
Records
341
Agent score
94%

What's inside BLoC

  1. Overview of the Bloc ecosystem packages

    master

    The Bloc ecosystem is composed of several specialized packages depending on your target platform and requirements:

    • bloc: The core Dart APIs.
    • flutter_bloc: Flutter-specific widgets for Bloc integration.
    • bloc_test: APIs for testing Blocs.
    • bloc_concurrency: Event transformers for managing event concurrency.
    • hydrated_bloc: Support for caching and persistence.
    • replay_bloc: Support for undo/redo functionality.
    • angular_bloc: Components for AngularDart.
    • bloc_tools: Command-line tools.
    • bloc_lint: Custom linter for Bloc code.

  2. Overview of the Bloc library

    master

    Bloc is a predictable state management library designed to help implement the BLoC (Business Logic Component) design pattern. It is highly compatible with the following ecosystem packages:

    • flutter_bloc: For Flutter integration.
    • angular_bloc: For Angular integration.
    • bloc_concurrency: For managing event concurrency.
    • bloc_test: For testing BLoC components.
    • hydrated_bloc: For persisting state.
    • replay_bloc: For replaying events.

  3. Explore the Bloc ecosystem and community resources

    master

    The Bloc ecosystem includes several community-contributed packages, video tutorials, and written guides to help you master state management in Dart, Flutter, and JavaScript.

    Related Packages

    • Bloc.js: A JavaScript port of the bloc library.
    • Firebase Auth: A Firebase Auth plugin for Web and Mobile.
    • Form Bloc: A package for creating forms using the BLoC pattern with reduced boilerplate.
    • Flame Bloc: Integration for the Flame game engine.

    Learning Resources

    • Video Tutorials: Extensive coverage is available via YouTube, including deep dives into basics, unit testing with bloc_test, dynamic theming, state persistence with hydrated_bloc, and building production-ready apps with Firebase.
    • Written Guides: For large-scale application architecture, refer to the DevonFw Flutter Guide or the scientific paper on building large-scale reference applications with BLoC.

    Developer Tools

    • Feature Scaffolding for VSCode: A VSCode extension to help quickly scaffold features based on clean architecture principles.

  4. Integrate Blocs and Cubits into Flutter with flutter_bloc

    master
    The flutter_bloc package provides a set of widgets designed to make it easy to integrate Bloc and Cubit instances into a Flutter application. It is built to work seamlessly with package:bloc. All widgets exported by flutter_bloc are compatible with both Cubit and Bloc instances.

  5. Core values and benefits of using Bloc

    master

    Bloc is a state management solution designed to separate presentation from business logic. It is built around three core values:

    • Simple: Easy to understand and accessible to developers of varying skill levels.
    • Powerful: Enables the creation of complex applications by composing them from smaller, manageable components.
    • Testable: Facilitates testing every aspect of an application to allow for confident iteration.

    By regulating when state changes occur and enforcing a single way to change state throughout an application, Bloc makes state changes predictable. This helps developers manage application state, test edge cases, record user interactions, and promote code reusability and team efficiency.

  6. What is a Bloc and how does it work?

    master

    A Bloc is an advanced class that relies on events to trigger state changes rather than calling functions directly. It follows an event-driven architecture where events are the input and states are the output.

    Key Characteristics:

    • Event-Driven: Instead of calling a method to change state, you add an event to the Bloc. The Bloc then converts that event into one or more states.
    • Traceability: Because state changes are tied to specific events, you can track exactly what triggered a state change (a Transition).
    • Event Transformers: Bloc allows you to use reactive operators (like debounce, throttle, or buffer) on the incoming event stream to control how events are processed.
    • Inheritance: Bloc extends BlocBase, meaning it shares the same public API as Cubit (like the state getter and addError method).

  7. What is BlocPipe and how does it work?

    master

    In angular_bloc, BlocPipe is an Angular pipe used to bind Bloc or Cubit state changes directly to the presentation layer (HTML templates). It handles re-rendering HTML elements whenever a new state is emitted. It functions similarly to Angular's AsyncPipe but is specifically optimized for the BLoC pattern.

    To use it, you must include BlocPipe in the pipes array of your @Component decorator.

    @Component(
  selector: 'my-component',
  templateUrl: 'my-component.html',
  pipes: [BlocPipe],
)
class MyComponent { ... }

  8. What is a Bloc and how to use it

    master

    A Bloc is an advanced class that extends BlocBase and manages state by reacting to events. Instead of calling functions to change state, you add events to the Bloc, which are then processed by event handlers.

    Key Concepts:

    • Events: Classes (often sealed) that represent actions or triggers.
    • Event Handlers: Registered using the on<EventType>((event, emit) => ...) syntax in the constructor. These handlers convert events into states using emit.
    • Event Processing: By default, events are processed concurrently, but you can provide a custom EventTransformer to change this behavior.
    • Lifecycle: Call await bloc.close() when finished.
    • Observation: In addition to onChange and onError, Bloc allows overriding onEvent (called when an event is added), onTransition (called just before state updates, containing the event and the state transition), and onDone (called when an event handler completes).
    sealed class CounterEvent {}
final class CounterIncrementPressed extends CounterEvent {}

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<CounterIncrementPressed>((event, emit) => emit(state + 1));
  }
}

// Usage
void main() async {
  final bloc = CounterBloc();
  bloc.add(CounterIncrementPressed());
  await Future.delayed(Duration.zero); // Ensure event is processed
  print(bloc.state); // 1
  await bloc.close();
}

  10. What is a Cubit and how to use it

    master

    A Cubit is a class that extends BlocBase used to manage state. It is simpler than a Bloc because it relies on direct function calls to trigger state changes rather than events.

    Key Concepts:

    • Initial State: Required via the constructor using super(initialState).
    • State Access: Use the state getter to read the current state.
    • State Updates: Use the emit(newState) method to output a new state.
    • Lifecycle: Call close() when the Cubit is no longer needed to prevent leaks.
    • Observation: You can override onChange (called before a state change) and onError within the Cubit to monitor its specific behavior.
    /// A `CounterCubit` which manages an `int` as its state.
class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
}

void main() {
  final cubit = CounterCubit();
  print(cubit.state); // 0
  cubit.increment();
  print(cubit.state); // 1
  cubit.close();
}

  12. Implement Login logic with LoginCubit

    master

    The LoginCubit manages the LoginState for a login form. It is used when the state is relatively simple and localized, making a Cubit a more concise alternative to a Bloc.

    Key responsibilities:

    • Managing LoginState (containing Email, Password, and FormzStatus).
    • Exposing APIs for authentication: logInWithCredentials and logInWithGoogle.
    • Responding to email/password updates.

    It requires a dependency on an AuthenticationRepository to perform the actual sign-in operations.

    // Example of the LoginCubit API usage
// Note: Implementation details are in the repository
loginCubit.logInWithCredentials(email, password);
loginCubit.logInWithGoogle();