Flutter: Clean Architecture and BLoC Implementation

Introduction

This article delves into the design and implementation of a Flutter-based product listing application. It demonstrates how to fetch product data from an API and present it in a clean, user-friendly format. The project adheres to clean architecture principles and leverages the BLoC (Business Logic Component) pattern for state management.

---

Features Overview

The application includes the following key functionalities:

• Fetching product data from an external API: https://api.escuelajs.co/api/v1/products
• Organised folder structure based on clean architecture principles
• Reusable components and utility classes
• Implementation of the BLoC pattern for robust state management

---

Development Environment

The project is built using:

• Flutter Version: 3.27.0

Ensure you have this version installed to avoid compatibility issues.

---

Folder Structure

Adhering to clean architecture principles, the project is structured as follows:

lib/
├── config/
│   ├── app_config.dart
│   ├── routes.dart
│   └── themes.dart
├── core/
│   ├── constants/
│   │   ├── app_assets.dart
│   │   ├── app_colors.dart
│   │   ├── app_strings.dart
│   │   └── app_styles.dart
│   ├── errors/
│   │   ├── exceptions.dart
│   │   └── failure.dart
│   ├── network/
│   │   ├── api_client.dart
│   │   └── api_constant.dart
│   ├── utils/
│   │   ├── date_formatter.dart
│   │   ├── logger.dart
│   │   ├── navigation.dart
│   │   ├── size_utils.dart
│   │   └── validators.dart
│   └── widgets/
│       ├── app_button.dart
│       ├── app_text.dart
│       ├── app_text_button.dart
│       └── app_wrapper.dart
├── features/
│   └── product/
│       ├── data/
│       │   ├── models/
│       │   └── repositories/
│       ├── domain/
│       │   └── repositories/
│       │       └── product_repository.dart
│       └── presentation/
│           ├── bloc/
│           └── pages/
└── main.dart

Key Directories

• config: Contains application-level configuration such as themes and routes.
• core: Houses shared utilities, constants, error handling, and reusable widgets.
• features: Encapsulates feature-specific code, promoting modularity and separation of concerns.
  • data: Manages data sources and models.
  • domain: Implements business logic through repositories.
  • presentation: Focuses on the UI and state management.

---

API Integration

The application integrates with the Escuela API to fetch product data. Here are the API details:

• Endpoint: https://api.escuelajs.co/api/v1/products
• Method: GET
• Response: JSON array containing product information.

Sample API Response

[
  {
    "id": 1,
    "title": "Product 1",
    "price": 29.99,
    "description": "A sample product",
    "images": ["image_url"]
  }
]

---

State Management with BLoC

The application employs the BLoC pattern to manage state effectively. This pattern separates business logic from the UI, ensuring clean and maintainable code.

BLoC Features:

• Handles product loading, success, and failure states.
• Improves testability and scalability.
• Ensures a clear separation of concerns.

---

Getting Started

Prerequisites

• Install the Flutter SDK.
• Use an IDE with Flutter support (e.g., Android Studio or VS Code).

Steps to Run

1. Clone the repository.
2. Navigate to the project directory.
3. Install dependencies:

   flutter pub get
   

4. Run the application:

   flutter run
   

---

Conclusion

This Flutter product listing project demonstrates best practices in app development, including clean architecture and state management with BLoC. With its modular structure and reusable components, it serves as a foundation for building scalable and maintainable Flutter applications.