Flutter Clean BLoC Architecture — Overview

A combination between Clean Architecture and BLoC Architecture

Photo by Towfiqu barbhuiya on Unsplash

Overview

In this series of articles, we’ll take a detailed look at Clean Bloc Architecture. I’ll provide an overall overview of the architecture, then break it down into separate articles that delve into the details of each layer. These articles will be abstracted, so you don’t need to worry about specific coding packages. Whether you’re using Flutter_bloc, Getx, or even no package at all, the same abstractions can be applied.

Why do we need architecture?

It’s a question that might seem obvious, but let’s start with a quote from “Robert C. Martin, Clean Architecture” (aka Uncle Bob):

The goal of software architecture is to minimize the human resources required to build and maintain the required system.

While this is certainly an important benefit, my personal favorite advantage of architecture is that it provides a solid foundation for the software project. This becomes even more critical when there are multiple developers on a project, as architecture ensures that everyone is on the same page when it comes to solutions.

Clean Architecture

Clean Architecture, also known as Domain-Driven Development, is a platform-independent architecture that separates software into different layers to create a system that is intrinsically testable and maintainable.

Let’s take a closer look at some of the key principles of Clean Architecture that are essential for any app:

• The Dependency Rule: This rule states that source code dependencies can only point inwards. In other words, nothing in an inner circle can know anything about something in an outer circle.
• Independence: Each layer in this architecture is an independent part of the system. You should be able to change the UI without making any changes to the lower layers. Similarly, if you want to change the database type, you should be able to do it without making any changes to the domain or application layer.

Clean Architecture

BLoC Pattern

The BLoC pattern focuses on separating business logic from the UI, using two main principles:

1. Streams: Streams handle widget state changes, ensuring that any changes to widget state come through streams. Widgets only listen to these streams to receive updates.
2. Events: All interactions between the widget and BLoC should use events. Widgets should only send events to BLoC and wait for updates through streams.

By using these principles, we can achieve the primary advantage of BLoC, which is Abstraction. Abstraction in BLoC means that widgets and Blocs do not know anything about each other, and the only connection between them is through events and streams. This independence allows them to change safely without impacting each other.

Clean Bloc Architecture

To define Clean BLoC architecture for Flutter, it’s important to divide the app into different layers based on Clean Architecture. In this article, we will provide a brief summary of each layer and follow up with separate stories to dive deeper into each one.

Presentation

This layer is responsible for the user interface of the app, including widgets, themes, text styles, localization, and navigation. It’s worth noting that there may be varying opinions among developers regarding the placement of certain components within this layer. For instance, some developers prefer to place the Navigator in the Application layer.

Check out this article for a detailed review of the Presentation layer

Flutter Clean BLoC Architecture — Presentation

Application

The Application layer is where we include BLoC in Clean Architecture. Here, we define our BLoC class, which serves as the connection between widgets in the Presentation layer and the Domain layer. By adding BLoC here, we can achieve independence between the Application and Presentation layers.

Domain

The main focus of the Domain layer is to create an abstraction layer between the Application and Infrastructure layers. In addition to this, the Domain layer also handles validation and other tasks.

Infrastructure

The Infrastructure layer is the foundation of the app, responsible for connecting the app to the database, calling REST APIs, and utilizing method channels to send and receive data.

While this summary may not be enough to start using Clean BLoC architecture in your next project, it provides a solid foundation. I will provide future stories that delve deeper into each layer, giving developers a thorough understanding of how to implement Clean BLoC architecture in their Flutter mobile apps.

Conclusion

Implementing the Clean Architecture approach with BLoC in Flutter applications can significantly improve the code’s maintainability, scalability, and testability. With the separation of concerns and clear boundaries between layers, developers can focus on implementing business logic without worrying about the framework or UI details.

Flutter Level UP

Flutter level UP will help you to improve your Flutter skills. This list will be helpful for you if you know the basics of application development by Flutter and looking to improve your other skills.

Thanks for reading. Stay tuned for more. Follow and Check out Flutter Level UP for future stories on this topic.