Flutter x Clean Architecture

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