Flutter Bloc
Sunday, September 22, 2024
It's kind of like a cheat code, but for Bloc
Pubspec.yaml
This file is the configuration file for your Flutter project. It defines the project's dependencies, including the Flutter Bloc package: flutter_bloc
Main.dart
BlocProvider is a widget that provides a Bloc to its children. It creates an instance of the Bloc and makes it available for the subtree, allowing widgets to access the Bloc for state management. It’s commonly used to wrap a part of the widget tree where the Bloc is needed.
MultiBlocProvider is a widget that allows you to provide multiple Blocs to its children. It simplifies the process of providing several Blocs at once, keeping your widget tree clean and organized. You can declare multiple Blocs in a single provider, making them accessible to the entire subtree.
How Everything Works
This folder contains all your Bloc classes. Each Bloc might be organized by feature or function.
blocs/
my_feature_state.dart
my_feature_event.dart
my_feature_bloc.dart
This folder contains all your Bloc classes. Each Bloc might be organized by feature or function.
Example:
Bloc
A Bloc (Business Logic Component) is a core component of the Bloc architecture. It manages the business logic and state of your application. The Bloc receives events and emits states based on the business logic, separating the presentation layer from the business logic layer, which improves code maintainability.
State
State represents the data that your UI needs to display. In Flutter Bloc, states are defined as immutable objects. When the Bloc emits a new state, the UI listens for changes and rebuilds accordingly. Different states represent various conditions of the application (e.g., loading, loaded, error).
Event
Events are inputs that trigger changes in the Bloc. They are typically user actions or external triggers (like network responses). Events are also defined as immutable objects. When an event is added to the Bloc, it processes the event and emits a new state based on the logic defined within the Bloc.
Page
BlocBuilder is a Flutter widget that helps you build your UI in response to new states emitted by a Bloc. It listens for state changes in the Bloc and rebuilds the widget tree whenever a new state is emitted.
Key Points:
- Reactivity: Automatically rebuilds its child widget whenever the state changes.
- Builder Function: Takes a builder function as a parameter, which receives the current context and the state. You can use this to build the UI based on the current state.
- Performance: Optimized to rebuild only the parts of the UI that depend on the state, improving performance
context.read is a method used to access the instance of a Bloc or a provider without listening to its state changes. This is useful when you want to trigger an event or access a method in the Bloc without rebuilding the widget when the state changes.
Key Points:
- Non-listening: It retrieves the Bloc instance without listening for updates, so it won't cause the widget to rebuild when the state changes.
- Usage: Commonly used in response to user actions (like button presses) where you want to dispatch an event or call a method on the Bloc.
If you need a Flutter Bloc tutorial on YouTube, here it is: Flutter Bloc EASY Tutorial