Published in


An Introduction to Flutter Clean Architecture

Clean Architecture

Separation of Concerns

  • Do one thing: A function should do just one thing and do it well.
  • Single Responsibility Principle: A given method/class/component should have a single reason to change.
  • Dependency Injection: As much as possible, class dependency should be provided by objects outside of the class.
  • Code Architecture: i.e Clean Architecture.

“The only way to go fast is to go well.”
- Robert C. Martin

Implementing the Clean Architecture

The Diagram of Flutter Clean Architecture


Feature Layer

  • Pages: These are simply the pages of our app.
  • State Management: BLoCs, Provider, GetX, etc.
  • Widgets: Any other specific widgets needed by our pages.

Domain Layer

  • Use Cases: Application-specific business rules
  • Entities: Business objects of the application
  • Repositories: Abstract classes that define the expected functionality of outer layers

Data Layer

  • Repositories: Actual implementations of the repositories in the Domain layer. Repositories are responsible to coordinate data from the different Data Sources.
  • DTO Models: Representation of JSON structure that allows us to interact with our data sources.
  • Data sources: Consist of remote and local Data Sources. Remote Data Source will perform HTTP requests on the API. While local Data Source will cache or persist data.
  • Mapper: Map Entity objects to Models and vice-versa.

Resources and Shared Library

  • Resources: Contains assets (images, fonts, colors, etc), and other configurations.
  • Shared Library: Contains reusable components, functionalities (navigation, network, etc), and 3rd party libraries.

The Codes

Project Structures

Application- core
- user
- data
- dto
- user_dto.dart
- user_response_dto.dart
- datasource
- user_remote_datasource.dart
- user_local_datasource.dart
- mapper
- user_mapper.dart
- repository
- user_repository.dart
- di
- dependency.dart
- domain
- repository
- user_repository_impl.dart
- entity
- user_entity.dart
- usecase
- get_user_list_usecase.dart
- get_user_detail_usecase.dart
- di
- dependency.dart
- feature
- user
- page
- user_list_page.dart
- user_details_page.dart
- controller
- user_list_controller.dart
- user_details_controller.dart
- widget
- user_card_widget.dart







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