SmartSearchDropdown<T, K> class

A convenient widget that combines search functionality with a dropdown overlay showing paginated results from a SmartPaginationCubit.

This widget provides a complete search-with-results solution that can be placed anywhere in your UI. The results dropdown automatically positions itself in the best available space.

Generic Types

• T: The data type of items (e.g., Product, User)
• K: The key type used for identification (e.g., String, int)

Key-based Selection

When using key-based selection, you can:

• Set initial selection by key even before data loads
• Compare items by key instead of object equality
• Get notified of selected keys in addition to items

Example with key-based selection:

SmartSearchDropdown<Product, String>.withProvider(
  request: PaginationRequest(page: 1, pageSize: 20),
  provider: PaginationProvider.future((request) async {
    return await api.searchProducts(request.searchQuery ?? '');
  }),
  searchRequestBuilder: (query) => PaginationRequest(...),
  itemBuilder: (context, product) => ListTile(title: Text(product.name)),
  keyExtractor: (product) => product.sku,
  selectedKey: 'SKU-001',
  selectedKeyLabelBuilder: (key) => 'Product: $key',
  onKeySelected: (key) => print('Selected key: $key'),
)

Example with provider (creates cubit internally):

SmartSearchDropdown<Product, Product>.withProvider(
  request: PaginationRequest(page: 1, pageSize: 20),
  provider: PaginationProvider.future((request) async {
    return await api.searchProducts(request.searchQuery ?? '');
  }),
  searchRequestBuilder: (query) => PaginationRequest(
    page: 1,
    pageSize: 20,
    searchQuery: query,
  ),
  itemBuilder: (context, product) => ListTile(
    title: Text(product.name),
  ),
  onItemSelected: (product) {
    print('Selected: ${product.name}');
  },
)

Example with showSelected mode:

SmartSearchDropdown<Product, String>.withProvider(
  // ... other properties
  showSelected: true,
  selectedItemBuilder: (context, product, onClear) => ListTile(
    title: Text(product.name),
    trailing: IconButton(
      icon: Icon(Icons.close),
      onPressed: onClear,
    ),
  ),
)

Example with external cubit:

SmartSearchDropdown<Product, String>.withCubit(
  cubit: productSearchCubit,
  searchRequestBuilder: (query) => PaginationRequest(
    page: 1,
    pageSize: 20,
    searchQuery: query,
  ),
  itemBuilder: (context, product) => ListTile(
    title: Text(product.name),
  ),
  onItemSelected: (product) {
    print('Selected: ${product.name}');
  },
)