Flutter with BLoC Design Pattern

https://raw.githubusercontent.com/felangel/bloc/master/docs/assets/flutter_bloc_logo_full.png

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?

https://bloclibrary.dev/assets/bloc_architecture_full.png

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! 😃

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Carlo Tupa Indriauan

Carlo Tupa Indriauan

Computer science student at Universitas Indonesia