Flutter x Clean Architecture

DUBYDU — Thu, 30 Jun 2022 01:50:42 +0000

In the scope of this article, I assume that you already know what Clean Architecture is, and why should we use it.

./ Flutter Clean Architecture

As you can see, there are three main layers: Presentation, Domain, and Data.

Role and description of each layer:

I. Presentation

There is no business logic processing on this layer, hence it is only used to show UI and handle events.

1. Widget (Page)

Notify BloC of events such as screen display and user touch events, and Listen to the events emitted from BloC as well.

2. BloC

Receive events from View and execute UseCase according to the event if necessary.
Emit the data received from UseCase to View.
BloC doesn’t know about View at all.

II. Domain

This layer is responsible for business logic.

1. UseCase

Describes the logic processing required for the UseCase.
Work directly to Repository.

2. Translator

Convert the model into the entity in order to request to server-side, or convert the entity into the model to use for Presentation layer.

3. Model

A model will not depend on the data that acquire from server-side.
A model is used for the Presentation layer.

III. Data

This layer is responsible for communicating with server-side and data management logic.

1. DataSource

Describes the process to acquire and update the data.
This is the place decided whether to get the data from the server-side or use the data in the DB or cache.

2. Entity

An entity will depend on the data that acquire from server-side.
An entity is not used for the Presentation layer.

3. Repository

The bridge between Data layer and Domain layer.
We will use Translator in Repository in order to convert data.

./ Practice

For a better understanding, I’d like to demonstrate a flow that receives an action from Widget, processes it, requests/receives data from the server-side, and finally displays the data to Widget.

Source-code: https://github.com/dubydu/fluttourII

1. Data Layer

Create an Entity.

Inside api_client_type.dart, define an HTTP request like this:

Then, open your terminal, and run this command: make gen, the retrofit will take the rest responsibility. You also can custom the command line by editing this Makefile.

Define DataSource

Implement Repository

2. Domain Layer

Create Model

Define Translator

Implement UseCase

3. Presentation Layer

Define BloC

Implement Widget

4. DI

Let’s make our code becomes more modular. 😎

Create config_module

Create client_module

Create datasource_module

Create repository_module

Create usecase_module

Inject UseCase to BloC in my_app.dart by conforming to all of the modules.

That’s all, run the project, and let’s see what happens!

Pitfalls

In order to run this project, you need to run in a specific environment.

Development: flutter run -t lib/main_dev.dart
Production: flutter run -t lib/main_prod.dart