Flutter Clean BLoC Architecture — Presentation
A combination between Clean Architecture and BLoC Architecture
Flutter Clean BLoC Architecture
This series of stories is going to be a comprehensive guideline for using Clean Architecture alongside BLoC pattern in Flutter applications. I recommend starting this series from the first story which is an overview of architecture then doing a deep dive into each layer through their own stories. Here is the link for the Overview story.
In this article, we will focus specifically on the Presentation Layer, its importance, and how it plays a pivotal role in Flutter applications built using Clean BLoC Architecture.
Presentation
The Presentation Layer, often referred to as the UI layer, is the outermost layer of the application. Its primary purpose is to handle user interactions, display information, and act as an intermediary between the user and the underlying layers.
You may remember this description about Flutter in the previous Flutter landing page
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
Starting as a UI toolkit caused Flutter to focus on this layer which lead to the creation of a lot of useful Widgets, Animations, Shaders, Slivers, ….
Components
Let’s have an overview of the components and their structure in the presentation layer. Of course, these are not whole components and there will be more components depending on your application.
Dividing each layer into sub-layers and establishing a clear dependency hierarchy is a critical aspect of building robust applications. By organizing the layers in this way, we can avoid circular dependencies, which is vital for maintaining a codebase that is easy to understand and modify.
As Flutter continues to advance and evolve, the ecosystem provides an ever-growing selection of tools and libraries for each component within the layer. It is important to consider these tools when incorporating new components into our application. We should carefully decide where to place each component within the layer tree and determine which parts of the application will utilize them. This thoughtful approach ensures that our codebase remains organized and allows for the seamless integration of new functionalities.
Now let’s review 2 main components of the presentation layer
Widgets
In Flutter, UI components are represented by widgets. Widgets define the structure, appearance, and behavior of different screens or views in the application. In the Presentation Layer, we create reusable and modular widgets that encapsulate specific UI elements, screens, or even entire features. This promotes code reusability and a consistent UI design across the application.
Widget design is crucial in Flutter applications. Since Flutter follows a widget tree structure, the way widgets are organized directly affects the scalability, maintenance, and testability of the app. To improve your skills in creating different widgets, I recommend exploring stories on Widget Design patterns in Flutter. By mastering these patterns, you can enhance your abilities and build user interfaces that are both strong and adaptable.
Navigation and Routing
The Presentation Layer is responsible for managing the app’s navigation and routing. Flutter provides a Navigator class that allows us to push and pop screens, manage navigation stacks, and pass arguments between screens.
At times, developers may choose to utilize navigation outside of the presentation layer. However, it’s essential to avoid cross-layer components as they can complicate maintenance and testing processes. By consolidating the navigation logic within the Presentation Layer, we ensure a distinct separation between UI considerations and business logic. This approach promotes a well-organized codebase and facilitates better management of the application’s functionalities.
State
As mentioned in the overview, we will be utilizing the BLoC pattern for managing the state. In this architecture, the presentation layer’s responsibility is to display the state rather than manage it.
Our widgets will act as consumers of the application layer, which handles the management of both app and widget states. By handling user interactions and sending various events, the presentation layer informs the application layer to take the appropriate actions. The application layer is responsible for updating the state, and we receive the state changes from it.
It’s important to note that implementing this architecture is not limited to a specific package such as flutter_bloc or riverpod. We have the flexibility to use any package that handles the application layer and implements the BLoC pattern. We will dive further into the application layer in future stories, exploring different techniques and tools.
Testing and Debugging
Flutter’s testing framework offers valuable tools for conducting widget testing. Having an independent Presentation layer allows users to test it separately from the rest of the application. The advantage of separating the Presentation layer’s components from other layers is that they can be easily tested individually. Furthermore, Flutter provides powerful debugging tools like the Flutter Inspector and DevTools, which greatly aid in identifying and resolving UI-related issues during the development process. These debugging tools contribute to the overall quality and reliability of the user interface.
Conclusion
The Presentation Layer plays a crucial role in Flutter applications built using the Clean BLoC Architecture. As the UI layer, it handles user interactions, displays information, and acts as an intermediary between users and other layers. By leveraging Flutter’s widget system, we can create reusable components and maintain a consistent UI design. By adopting this architecture, developers can build scalable, maintainable, and testable Flutter applications.
Flutter Level UP
Flutter Level UP is a resource to improve your Flutter skills. If you have some experience with Flutter and want to improve, check out the list on my page and follow for updates.
Thanks for reading. Stay tuned for more. Follow and Check out Flutter Level UP for future stories on this topic.
