DEV Community


Posted on

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

Image description
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.


1. Data Layer

  • Create an Entity.
  • 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!


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

Discussion (0)