Infinite Scrolling and Searchable Product List

This is a Flutter application that allows users to view, search, and manage a list of products. The app features product fetching with infinite scrolling, search functionality, and a favorites system. The app is built using Clean Architecture, BLoC/Cubit state management, and Hive for local storage.

Features

  • Product Listing: Fetch and display a list of products with infinite scrolling.
  • Search: Search for products by query with instant results.
  • Favorites: Add and remove products from favorites. View all favorite products in a separate screen.
  • Network Checking: Handle no internet connection scenarios with appropriate error messages.

Screens

bloc_clean_architectural_demo

Video

video.1.mp4

Architecture

Clean Architecture

The project is structured using Clean Architecture principles:

  • Presentation Layer: Contains the UI and state management logic using Flutter's BLoC/Cubit.
  • Domain Layer: Contains business logic and use cases.
  • Data Layer: Handles data sources (remote and local) and repository implementations.

State Management

State management is handled using Flutter's Cubit. The ProductCubit manages the state for fetching and searching products, while the FavoriteCubit handles the state for managing favorite products.

Setup

  1. Clone the Repository

    git clone https://github.com/iaohtdev/bloc_clean_architectural_demo.git
    cd bloc_clean_architectural_demo
  2. Install Dependencies

    flutter pub get

Usage

Fetching Products

Products are fetched and displayed with infinite scrolling. Use the ProductCubit to handle fetching and searching products.

Search Products

Use the searchProducts method in ProductCubit to search for products based on user input.

Manage Favorites

Add and remove products from favorites using the FavoriteCubit. The favorites are stored locally using Hive and can be viewed in the Favorites screen.

Error Handling

  • Network Errors: Display toast messages when there is no internet connection.
  • Fetch Errors: Show error messages in the UI if product fetching fails.

Dependencies

Flutter SDK

  • flutter: Core Flutter SDK.
  • cupertino_icons: Icons for iOS.

State Management

  • flutter_bloc: BLoC library for state management.
  • equatable: Library for value-based object comparison.

Networking and API

  • dio: HTTP client library for network requests.

Dependency Injection

  • get_it: Dependency Injection library.

Data Storage

  • hive: Lightweight NoSQL database for Flutter.
  • hive_flutter: Hive integration with Flutter.

Serialization

  • json_annotation: Library for annotating classes for JSON serialization and deserialization.
  • json_serializable: Code generation tool for serialization based on annotations.

Image Handling

  • cached_network_image: Library for loading and caching images from URLs.

Connectivity

  • connectivity_plus: Library for checking network connectivity.

Localization

  • intl: Library for internationalization and date/time formatting.

Toast Notifications

  • fluttertoast: Library for showing toast notifications.

Example

// Fetch products
context.read<ProductCubit>().fetchProducts();

// Search products
context.read<ProductCubit>().searchProducts('query');

// Add to favorites
context.read<FavoriteCubit>().addFavorite(product);

// Remove from favorites
context.read<FavoriteCubit>().removeFavorite(productId);