Flutter and Clean Architecture(I)

Writing codes is a skill. You must agree with me that reading codes is another skill. Building an app that is scalable and has clean architecture is a craft that must be honed.

One of the very few things that experience will do for you as a mobile engineer is that it saves you time from doing very foolish things.

Let’s do a flashback

While I started my journey with Flutter alongside a couple of my friends. We were given a project to build a school management application that displays the records of students which includes their scores, subjects that they are offering, books to recommend, and an admin dashboard for teachers to monitor the learning curve of each student.

I was to be the backend guy while my other colleagues worked on the front end. Walahi, it was one of the craziest projects I have ever worked on. We didn’t know GitHub could be used for collaboration, never heard of state management, never heard of caching or what architecture was. At least to us then, architecture would be only applicable to Architects…

How did we have it done?

We were sending the files to a flash drive.

However, this was not even the problem.

While working on the project, I told my team members that they were not giving me what I wanted and I became part of the front-end team.

In other words, I became a backend guy, a front-end guru, and a product manager in one project. It wasn’t funny

Wahalas has wa!

The problem with joining the front-end team was reading the codes they had written. They were no separate folders and no line comments. All the codes were written together. I didn’t know which was the model class, the view page, the page that handles APIs, or the controllers' page.

If that code had any errors, debugging will be a herculean task.

This, therefore leads to me what is called architecture in Flutter.

If you give me your code to read or to debug, the first question I will ask will be in which folder contains the error and what type of architecture are you using for your application.

Architecture in Flutter

Architecture in software engineering refers to the high-level design and organization of a software system. It provides a blueprint for how different components of a system will interact, how data will flow between them, and how the system will fulfill its intended functionality while meeting quality attributes such as performance, scalability, maintainability, and security.

Key aspects of software architecture include:

1. Components and Modules: Architectural decisions define how the system’s functionality is divided into smaller, manageable components or modules. These components are designed to be cohesive and loosely coupled, allowing for easier development, testing, and maintenance.
2. Interfaces and Interactions: Software architecture specifies how components interact with each other through well-defined interfaces. This includes defining communication protocols, data exchange formats, and methods of interaction.
3. Data Management: Architecture defines how data is stored, accessed, and managed within the system. This includes database design, data caching, data synchronization, and data migration strategies.
4. Patterns and Styles: Software architecture often leverages design patterns, architectural patterns, and architectural styles to solve recurring design problems and promote best practices.
5. Decomposition and Abstraction: Architecture involves breaking down a complex system into manageable parts, abstracting away implementation details, and focusing on high-level concepts and relationships.

What then is Clean Architecture in Flutter?

Clean Architecture is a software architectural pattern that provides a structured and modular way to design and organize code within a Flutter application. It aims to separate different concerns and responsibilities while maintaining a clear boundary between different layers of the application. The primary goal of Clean Architecture is to create a well-organized, maintainable, and testable codebase that is independent of external frameworks and libraries.

Do you want to make your codes readable, testable, and more organized?

Have an architecture before writing your codes at all.

Clean Architecture in Flutter involves the following layers:

1. Presentation Layer(UI)
2. Domain Layer(Business Logic)
3. Data Layer(Repositories and Data Sources)

Presentation Layer contains the user interface components, such as widgets, screens, and user interactions. It is responsible for rendering the user interface and handling user input. It communicates with the Domain layer using abstract methods and classes

The Domain Layer on the other hand contains the entire business logic of your application. It defines the use cases and business rules without being tied to any specific UI or data framework. This layer contains entities, use cases and business logic interactions.

The data layer is responsible for providing data to the domain layer. It interacts with various data sources, such as databases, APIs, or local storage. The data layer includes repository interfaces that define the contract for data retrieval and storage.

In our next tutorial, we would be having a more elaborate study on clean architecture alongside naming conventions for your folders to ensure the efficiency of your application.

In the meantime, please leave a comment on what architecture you use for your Flutter application and why