Flutter Shopping Cart - Riverpod State Management Demo

This Flutter project serves as a practical demonstration of state management using the Riverpod package. It's a simple shopping cart application where users can view a list of products, add them to a cart, and see the total cost.

The primary goal of this project is to showcase a clean and scalable architecture for managing state in a Flutter application, leveraging Riverpod's code generation capabilities for simplicity and robustness.

Features

• Product Catalog: Displays a list of available products with their names, prices, and images.
• Shopping Cart: Allows users to add and remove products from their cart.
• Live Cart Total: The total price of all items in the cart is calculated and displayed in real-time.
• State Persistence (Conceptual): The architecture is set up to easily add state persistence if needed.

State Management with Riverpod

This project heavily relies on the flutter_riverpod package, along with riverpod_annotation and riverpod_generator, to manage the application's state. This modern approach simplifies provider creation and ensures type safety.

The core of the state management is organized into providers:

1. Product Providers (lib/providers/product_provider.dart)

• productsProvider: A simple Provider that exposes the complete list of available products. The data is currently hardcoded for demonstration purposes.
• reducedProductsProvider: A Provider that demonstrates business logic by exposing a filtered list of products (e.g., those with a price less than 50).

2. Cart Providers (lib/providers/cart_provider.dart)

• cartNotifierProvider: A NotifierProvider that exposes a CartNotifier. This notifier contains the logic for managing the shopping cart.
  • addProduct(Product product): Adds a given product to the cart.
  • removeProduct(Product product): Removes a product from the cart.
  • The state of the notifier is a Set<Product> to automatically handle duplicate entries.
• cartTotalProvider: A Provider that "watches" the cartNotifierProvider and calculates the total price of all products currently in the cart. This is a great example of a computed provider, which automatically recalculates when its dependencies change.

Project Structure

The lib directory is organized to maintain a clean and scalable codebase:

lib/
├── models/
│   └── product.dart      # The data model for a Product.
├── providers/
│   ├── cart_provider.dart  # Providers for cart state and logic.
│   └── product_provider.dart # Providers for product data.
├── screens/
│   ├── cart/             # Widgets and UI for the cart screen.
│   └── home/             # Widgets and UI for the home screen.
├── shared/
│   └── cart_icon.dart    # A reusable widget for the app bar.
└── main.dart             # The main entry point of the application.

Key Packages Used

• flutter_riverpod: The core package for state management.
• riverpod_annotation: Provides the annotations (@riverpod) used for code generation.
• riverpod_generator: The code generator that creates the .g.dart files, reducing boilerplate.
• build_runner: The tool used to run code generators in Dart.

Setup and Run

1. Clone the repository:

   git clone <your-repo-url>
   cd state_management_flutter

2. Get dependencies:

   flutter pub get

3. Run the code generator: This step is necessary to generate the provider files (*.g.dart).

   dart run build_runner watch

   Use watch for continuous regeneration as you code, or build for a one-time build.

4. Run the app:

   flutter run

---

This README was generated to provide a clear and comprehensive overview of the project.