Facet List

Signature

HitsSearcher.buildFacetList(
  _FilterState_ filterState,
  String attribute,
  // Optional parameters
  _FilterOperator_ operator,
  _SelectionMode_ selectionMode,
  _bool_ persistent,
)

View live demo

Open the live Facet List example in your browser.

FacetList is a filtering component that displays facets and lets users refine their search results by filtering on specific values.

Requirements

The attribute provided to the widget must be in attributes for faceting, either on the dashboard or using the attributesForFaceting parameter with the API.

Examples

Create FacetList with HitsSearcher and FilterState:

Dart

// Create a FilterState
final filterState = FilterState();

// Create a HitsSearcher
final hitsSearcher = HitsSearcher(
  applicationID: 'YourApplicationID',
  apiKey: 'YourSearchOnlyApiKey',
  indexName: 'YourIndexName',
)..connectFilterState(filterState);

// Create a FacetList
final facetList = hitsSearcher.buildFacetList(
  filterState: filterState,
  attribute: 'YourAttribute',
);

Get selectable facet changes by listening to facets submissions. Call toggle to select or deselect a facet value:

Dart

StreamBuilder<List<SelectableFacet>>(
  stream: facetList.facets, // Listen to `facets` stream
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      final facets = snapshot.data ?? [];
      return ListView.builder(
        itemCount: facets.length,
        itemBuilder: (BuildContext context, int index) {
          final selectable = facets[index];
          final facet = selectable.item;
          return ListTile(
            title: Text('${facet.value} (${facet.count})'),
            trailing: selectable.isSelected ? const Icon(Icons.check) : null,
            onTap: () => facetList.toggle(facet.value), // Toggle a facet value on tap
          );
        },
      );
    } else {
      return const LinearProgressIndicator();
    }
  },
);

Dispose

Call dispose to release underlying resources:

Dart

facetList.dispose();

Parameters

FilterState

required

The FilterState that holds your filters.

String

required

The attribute to filter.

FilterOperator

default: FilterOperator.or

Filters operator, which can either be FilterOperator.and or FilterOperator.or.Use filters or facet filters for more complex result refinement.

SelectionMode

default: SelectionMode.multiple

Whether the list can have SelectionMode.single or SelectionMode.multiple selections.

bool

default:false

When true, the selection will be kept even if it doesn’t match current results anymore.

Fields

Stream<List<SelectableFacet>>

A stream of facets with their selection status.

Dart

facetList.facets.listen((facets) {
  for (var facet in facets) {
    print("${facet.item} ${facet.isSelected ? 'x' : '-'}");
  }
});

FilterEventTracker

FilterEventTracker instance responsible for sending Insights events related to user interactions with facets, such as clicking, viewing, and converting filters. With the eventTracker, you can track user’s behavior, which can help you personalize their search experience.

Dart

facetList.eventTracker.clickedFilters(
  indexName: 'INDEX_NAME',
  eventName: 'your_event_name',
  values: ['value1', 'value2'],
);

Methods

Select or deselect the provided facet value depending on the current selection state.

Dart

facetList.toggle('blue');

Gets the latest List<SelectableFacet> value submitted by facets:

Dart

final selectableFacet = facetList.snapshot();

Releases all underlying resources.

Dart

facetList.dispose();

Algolia for Flutter

View live demo

About this widget

Requirements

Examples

Display facets

Dispose

Parameters

Fields

Methods

View live demo

​About this widget

​Requirements

​Examples

​Create facet list

​Display facets

​Dispose

​Parameters

​Fields

​Methods

About this widget

Requirements

Examples

Create facet list

Display facets

Dispose

Parameters

Fields

Methods