State Management

Two popular state management approaches in Flutter are Provider and BLoC (Business Logic Component). This documentation provides an overview of these state management techniques, their key concepts, and how to implement them in Flutter applications.

• Provider A simplified State Management Solution

• BLoC (Business Logic Component) Pattern

State management involves managing and updating the data and UI state within a Flutter application. It helps handle dynamic data, respond to user interactions, and keep the user interface synchronised with the underlying data.

Provider State Management

Provider is a Flutter package that simplifies state management by offering a straightforward approach based on the InheritedWidget mechanism. It allows data to be passed down the widget tree efficiently and notifies dependent widgets when the data changes.

Key Concepts

• ChangeNotifier: A class that extends ChangeNotifier and represents the state. It provides the notifyListeners() method to notify listeners about state changes.

• Provider: An InheritedWidget that provides the state to its descendants. It listens to ChangeNotifier updates and rebuilds widgets that depend on the state.

Implementing Provider in Flutter

1. Add the provider package to your Flutter project's dependencies.

2. Create a class that extends ChangeNotifier to represent the state.

3. Wrap the root widget of your application with the MultiProvider widget to establish the provider hierarchy.

4. Within the widget tree, use Provider.of<T>(context) to access the state and rebuild widgets when the state changes.

5. Use Consumer<T> to consume the state and rebuild specific widgets when the state changes.

Working with ChangeNotifier

ChangeNotifier classes are responsible for holding the application state and notifying listeners about state changes. To update the state, modify the properties of the ChangeNotifier subclass and call notifyListeners().

Consuming Provider using Provider.of and Consumer

• Use Provider.of<T>(context) to obtain the current state within a widget. It rebuilds the widget whenever the state changes.

• Use Consumer<T> to listen to changes in the state and rebuild only the specific subtree wrapped by the Consumer widget.

For detailed information on the Provider, navigate through the following reference links:

• Provider Tutorial

• Provider State Management in Flutter

BloC State Management

BLoC (Business Logic Component) is a state management pattern in Flutter that helps separate the business logic from the UI.

It follows a unidirectional data flow, where the UI interacts with the BLoC to trigger events, and the BLoC emits new states that the UI can react to. In addition to the core BLoC pattern, the Flutter BLoC library provides useful widgets such as Bloc Consumer, Bloc Provider, and Bloc Listener to simplify the integration of BLoC in Flutter applications.

Key Concepts

• BLoC: The Business Logic Component represents the core logic of your application. It manages the state and exposes streams or methods to interact with that state.

• Event: An event is a user action or an external trigger that is passed to the BLoC. It can trigger state changes or other operations in the BLoC.

• State: The state represents the current condition of the application. It is emitted by the BLoC in response to events and reflects the data that the UI needs to display or react to.

Using Bloc Consumer

The BlocConsumer widget is a powerful tool for consuming the state emitted by a BLoC and rebuilding specific parts of the UI when the state changes.

1. Wrap the portion of your widget tree that depends on the BLoC state with the BlocConsumer widget.

2. Provide the BLoC instance and a builder function to define how the UI should be rebuilt based on the emitted state.

3. Inside the builder function, access the state and return the corresponding widget or widgets.

BlocConsumer<BlocType, StateType>(
  bloc: blocInstance,
  listener: (BuildContext context, StateType state) {
    // Perform side effects based on the emitted state
  },
  builder: (BuildContext context, StateType state) {
    // Build and return the widgets based on the emitted state
    return YourWidget();
  },
)

The listener parameter can be used to perform side effects and function calls based on the emitted state, such as showing a toast message or navigating to a different screen.

Using Bloc Provider

The BlocProvider widget is responsible for providing the BLoC instance to the widget tree and ensuring that it's accessible to all descendant widgets.

1. Wrap the root of your widget tree with BlocProvider.

2. Specify the BLoC type using the create parameter to create a new instance of the BLoC.

3. Access the BLoC instance using BlocProvider.of<BlocType>(context) within descendant widgets.

BlocProvider<BlocType>(
  create: (BuildContext context) => BlocInstance(),
  child: YourApp(),
)

Using Bloc Listener

The BlocListener widget is useful for listening to state changes emitted by the BLoC and performing side effects without rebuilding the UI.

1. Wrap the BlocListener widget around the portion of the widget tree that needs to listen to state changes.

2. Provide the BLoC instance and a listener function to handle state changes.

BlocListener<BlocType, StateType>(
  bloc: blocInstance,
  listener: (BuildContext context, StateType state) {
    // Perform side effects based on the state

For more information on Bloc Pattern, navigate through the reference links below -

• Bloc State Management

• BloC State Management - Event, State, Bloc