Filters

1. Requirements Document

Overview

A comprehensive filtering system capable of generating UI for complex queries (e.g., E-commerce product filters). It handles state, reset logic, and query string generation.

Functional Requirements

  1. Filter Types:
    • Range Slider (Price).
    • Multi-Checkbox (Brands).
    • Date Range.
    • Search Text.
  2. Logic:
    • Count display (e.g., "Apple (5)").
    • Dependency (Show "Wheel Size" only if Category is "Bikes").

2. Technical Document

Architecture

System Architecture

The Filter Engine relies on a centralized Bloc to manage the complexity of independent filter states and their dependencies. It compiles the final state into a canonical query suitable for API consumption.

API Design

Filter Definition

class FilterGroup {
    final String key; // e.g., 'brand'
    final String label;
    final FilterType type;
    final List<FilterOption> options;
}

State Management

Uses an internal FilterBloc that emits a canonical query string or map.

FilterBuilder(
    definitions: [
        FilterGroup(key: 'color', type: FilterType.checkbox, ...),
        FilterGroup(key: 'price', type: FilterType.range, ...),
    ],
    onApply: (query) => fetchProducts(query),
)