BLoC : Flutter at its best
Tags: flutter, programming, android, ios
Published: 2023-02-28 05:29:18

## Introduction
Coding without architecture will be so painful in this era. Especially there are many architecture pattern exists like Model-View-ViewModel, Model-View-Presenter, Model-View-Controller, etc. Architecture will make us easier to maintain our code and make the code more testable. Do you know flutter is also has an architecture pattern called BLoC? I will explain here.

## 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvtttnxmjheki662fdhp.png)

## Why Bloc?

> Bloc makes it easy to separate presentation from business logic, making your code fast, easy to test, and reusable.

When building production quality applications, managing state becomes critical.

As developers we want to:

1. know what state our application is in at any point in time.

2. easily test every case to make sure our app is responding appropriately.

3. record every single user interaction in our application so that we can make data-driven decisions.

4. work as efficiently as possible and reuse components both within our application and across other applications.

5. have many developers seamlessly working within a single code base following the same patterns and conventions.

6. develop fast and reactive apps.

Bloc was designed to meet all of these needs and many more.

## Getting Started to Bloc example

Let's started to this example. 

**Today I want to make a sample of getting HTTP response API using bloc.**

You can get the sample of API [here](https://run.mocky.io/v3/c93389be-f790-4a8e-979d-ce1dba4952f8)

First step you need to create flutter project and define this on **pubspec.yml**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7eimz6wizb8cxumkhffl.png)

- **http** is for getting HTTP Response API
- **flutter_bloc** is for using Bloc library
- **equatable** is for overrides "==" and _hashCode_ for you so you don't have to waste your time writing lots of boilerplate code.

Then you need to define API provider and API repository. This is used to follow clean architecture SOLID like on mobile native programming.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ueyx7wh8soekzs7vxqnb.png)

- **Provider** is for determine HTTP url used
- **Repository** is for communicating between provider and Bloc

Basically, Bloc is an _event-state based_ architecture. So you need to define the _state_ and _event_ you want to use.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqt2vb36u2wx9431fpiq.png)

- **Event** is for handling some actions and triggers from user or application (e.g onClickListener, onScrolling)

- **State** is for knowing what states is on going, next, and exception in the application (e.g onLoading, onFailure, onResponseSuccess)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnisu9k1xl1aneoy8fdn.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfqfy8a8d444hkbw4m7h.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j26poh9vfp9k8a07awhp.png)

> The key is on Api Bloc, every event will be trigger and sent to Bloc and processed and whether the process is done, bloc will emit to the state and ready to use.

Then on the widget you can use result the Api Bloc like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/auyo70dyxawe4ra3p9zo.png)

and provide bloc result using `BlocProvider` and `BlocConsumer` which can generate the API Bloc result state automatically when Api Repository is already emit every state based on network response condition.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2exadtk6eibl6kpw9f7j.png)

Thank you and happy coding :)

full source is [here](https://github.com/mikkelofficial7/flutter_song_lyrics)