Flutter Bloc Architecture in Brief

Olawale Ajepe
3 min readOct 5, 2022

--

Flutter Bloc is described to make it easy to separate presentation from business logic, making your code fast, easy to test, and reusable.

As stated in the Flutter Bloc Library; “Bloc attempts to make state changes predictable by regulating when a state change can occur and enforcing a single way to change state throughout an entire application.”

This article will be an introduction to further articles where more app development scenarios will be managed by Flutter Bloc.

Bloc does not only provide a way to manage app state as a state management solution, but it also provides an architecture. Having a well layered architecture is very significant in building an application that would scale not to complexity but into simplicity.

Flutter Bloc Architecture

Implementing the Bloc library allows us to separate our application into three layers:

Data Layer

This layer interacts with databases, network requests, and other services. It contains: Model, Data Provider, and Repository.

  • Model:Models are classes which help to determine the structure of a data. A model could be written to mirror a database. It could also be referred to as the template of data being received and sent from the application.

Below is sample user model to send data and receive data in json format using the factory methods toJson and fromJson respectively.

User Model
  • Data Provider: The data provider provides direct communication to data sources. Usually the HTTP Methods are managed here (POST, PUT, UPDATE, DELETE)
  • Repository: The repository manages raw data provided by the data provider layer. The Bloc (Business Logic) Layer communicates with the repository.

Business Logic

The Business Logic (Bloc) layer manages app events and states, for every event or activity that occur on the app, a state is rendered. Every user performed action is regarded to as an event (typing, pressing a button, opening the app) where a state will be emitted for a specific event to update the view (the presentation layer).

Presentation Layer

The presentation layer also referred to as the view rendering itself based on the state being emitted from a Bloc in relation to an event.

This is a brief introduction to Flutter Bloc Architecture. If anything is wrong with the explained concepts please react to it in the comment section for an update. Thanks.

If you find this article helpful, don’t forget to give some claps 👏👏

Also, you can continue studying State Management with Flutter Bloc Library in the post below:

--

--