BloC State Management : Flutter

Easy implementation of the BLoC pattern. Here’s a step-by-step guide to usingflutter_blocfor easy state management in your Flutter application.

What is BloC ?

BloC is a design pattern created by Google to help separate business logic from the presentation layer and enable a developer to reuse code more efficiently.

A state management library called BloC was created and maintained by Felix Angelo. It helps developers implement the BloC design pattern in their Flutter application. It means that a developer must know the state of an app at any time. There should be something displayed on the screen for every interaction with the app to let users know what is happening.

Why BloC Pattern ?

The primary problem is that the code is not clear, organised, maintainable, or testable. The app developers generally concentrate on building it for the short term rather than maintaining it for a long time.

Programming is all about how you and your team need to write code using an architecture that features the best, accommodating every feature and scale over time.

The best way to keep your code organised, clean, and maintainable in Flutter is to have a component that can mediate what the user sees and its logic.

BloC Concept

BloC is the brain of an advanced and complex component from your app. Depending on the user’s interactions with the app, there will be an event emerging from it that comes as an input to the BloC. Then inside the BloC, there will be a required mapped event to a state function, which will take the event and convert it into a state so the UI can successfully rebuild.

1. Events: BLoC events are used to decouple user interactions and application logic from the presentation layer, making it easier to manage state and handle different app actions in a structured and maintainable way.
2. States: BLoC is used to separate the presentation layer from the business logic layer and manage the application’s state in a predictable and structured way.
3. Stream of States: The stream is typically a sequence of asynchronous events that represent the different states of the BLoC. Developers can subscribe to this stream to receive updates whenever the BLoC’s state changes.
4. Event-to-State Mapping: Event-to-State Mapping refers to the process of handling events, which are typically user interactions or asynchronous data updates, and mapping them to changes in the application’s state.

1. Project Setup

Create a new project:

flutter create flutter_bloc

Also, Add some dependencies in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^latest_version
  http: ^latest_version
  equatable: ^latest_version

2. Data Model

To create a data model, you can use Json to Dart. After you convert the JSON, create file called model.dart under lib/and paste the codes.

3. API Provider

Create a file called provider.dart under lib/folder. provider.dart will use httpplugin to fetch data from API.

4. API Repository

Create one file as a class called repo.dart under lib/ folder. repo.dart doesn’t care where the data comes from and how the data can be found.

5. BloC Event

It’s simply, Every time if you want to do an action you have to put it into the event. In this application, we put theGetDataList into our event, if you want to add any event just create another class and implement with abstract class. Create a file called event.dart under lib/folder.

6. BloC State

If you find yourself needing to trigger specific actions in response to user interactions, you can utilise events. In this way, you can compartmentalise and manage your app’s behaviour more effectively. In my project, I will maintain various states, including initial, loading, loaded, and error states, to handle different application conditions and user interactions.

7. BloC

To organise your logic effectively, start by creating a file named bloc.dart within the lib/ directory. This file will serve as the central hub for housing and managing all the essential logic components for your App related functionality.

8. Home Screen

Create the page.dart under the lib/ folder to showing the data. After that also you can reload the data by onPress the reload button.

9. App Run

Run the following command to start your Flutter app on an Android or iOS emulator or connected device:

flutter run

Flutter will build and launch your app. That is look likes as per above Picture View.

GitHub - prashant-v-53/Easy-BloC-State-Management: Learn Easy BloC State Management in Flutter

❤ ❤ Thanks for reading this article ❤❤

Your feedback, comments, and ideas are valuable, so please don’t hesitate to reach out and let me know your thoughts. I’m here to help and learn from your insights.

Clap 👏 If this article helps you.