Flutter with BLoC Design Pattern
So a long story short, I was taking one of the courses at my university, especially majoring in computer science, namely software projects (Proyek Perangkat Lunak). As the name implies, I was given the task of creating a team of five people and making software with predetermined topics in this course. My team got the topic of creating mobile applications that are involved in academia, especially in the field of law. The name of the application is Pantau Peradilanmu. Well, in this article I will briefly explain how I implement flutter by using block design pattern on the project.
What is BLoC?
Business logic components (BLoC) allow you to separate the business logic from the UI. Writing code in BLoC makes it easier to write and reuse tests. In simple terms, BLoC accepts a stream of events, processes the data based on events, and produces the output as states.
Important BLoC concepts
Before we dive in, let’s review some basic BLoC concepts and terms so we’re all on the same page.
Events
Events tell BLoC to do something. An event can be fired from anywhere, such as from a UI widget. External events, such as changes in network connectivity, changes in sensor readings, etc.
BLoC
BLoC is a man in the middle. All the business logic sits inside the BLoC file. It simply accepts events, performs the logic, and outputs the states.
States
States represent the information to be processed by any widget. A widget changes itself based on the state.
Cubit
Cubit is a simpler version of the BLoC pattern. It eliminates the need to write events. Cubit exposes direct functions, which can result in appropriate states. Writing a Cubit instead of BLoC also reduces boilerplate code, making the code easier to read.
How I Manage State in Flutter using BLoC
The following is an example of a BLoC implementation in my group project that aims to display incident report data.
The first step is to create an event. Here I created 3 events that function to display all incident reports, when refreshed, and when searched.
After that, I create all the necessary states based on the events that have been created previously.
Then I create the bloc file that manages all events and states that occur as desired.
After that, the last step is to just display the entire incident report and you’re done.
That’s how I implemented the BLoC design pattern in my group flutter project. Hope you like it! 😃
