Architect your Flutter app the clean way with BLoC

Dev with Ahmad
12 min readApr 27, 2022

To start with, we all know that working solo on a project will be an easy and smooth experience. However, this not the reality in the industry.

One of the essential skills for a Software Engineer is to be able to work on large projects and collaborate with other engineers.

And some of the main areas in software engineering that will make collaboration much easier are code maintainability and readability. Basically, if the code is written in a clean and systematical approach, then fortunately you can add new features on top of it without suffering 😁

For front-end apps, we need to handle three things mainly. Which are, what the user interacts with, the logic performed by the app, and fetching data used in the app.

The combination of the three specified categories is known as “Three-tier Architecture”, which is followed mostly in many of the front-end apps.

The main idea of this architectural style, is to implement separation of concerns. Which means each layer is responsible for one thing only.

For example, if you want to change the UI of the app, then you know that you’ll be dealing with the “presentation” layer.

Another example is if you want to change something in your app APIs, then directly you’ll go to the “data” layer. I hope that shows you the importance of a clean architecture 🧐.

I think that is enough for an introduction. However, before we start, I need to emphasize on one important thing.

Which is there no one optimal way to architect your app, this is only what I’ve found to be scalable and maintainable for most of the projects that I’ve worked on.

Before we begin. I want to share with you that I’m currently working on a course to demonstrate this architecture with detailed videos. If you are interested you can check this URL

Layers Interactions 🔄

Red -> Presentation Layer, Blue -> Domain Layer, Green -> Data Layer

Before I explain each layer separately, we first need to fully understand the interactions between them.