- A search box to type your query
- Statistics about the current search
- A list to display search results with infinite scrolling
- A refinement list for filtering results
Prepare your project
Before you can use Algolia, you need an Algolia account. You can create a new one for free or use the following credentials for an example products dataset:- Application ID:
latency
- Search API Key:
927c3fe76d4b52c5a2912973f35a3077
- Index name:
STAGING_native_ecom_demo_products
Create a new Flutter app
In a terminal, run:Add project dependencies
This tutorial uses the Algolia Flutter Helper library to integrate Algolia and the Infinite Scroll Pagination library for infinite scrolling. Addalgolia_helper_flutter
and infinite_scroll_pagination
as dependencies to your project:
pubspec.yaml
Create a basic search interface
Build a basic search interface with a search box and a search metadata panel for showing the number of search results. Open the file./lib/main.dart
and look for the _MyHomePageState
class.
Remove its sample variables and method declarations (_counter
, _incrementCounter
),
then import the Flutter Helper library:
Dart
_productsSearcher
property of the HitsSearcher
type with your Algolia credentials as parameters.
The HitsSearcher
component performs search requests and obtains search results.
Dart
_searchTextController
property to _MyHomePageState
.
It controls and listens to the state of the TextField
component you use as the search box.
Dart
SearchMetadata
class with the metadata of the latest search.
In this example, it only contains the nbHits
value, which is the number of search results.
The SearchMetadata
class also has a fromResponse
factory method which extracts the nbHits
value from the SearchResponse
.
Dart
_searchMetadata
stream which listens to _productSearcher
responses and transforms them to SearchMetaData
instance.
Dart
build
method containing the user interface declaration.
The interface is based on the Scaffold
component.
Add the AppBar
with “Algolia & Flutter” as its title,
and the Column
component as its body:
Dart
Column
’s body will consist of three children: the search box,
the metadata panel and the hits list. Start with adding a search box.
Dart
main.dart
file.
Build and run your application by running flutter run
in a terminal or your development tool. In the simulator, you should see the app bar with title and the search box below.
Add a Text
widget embedded in Padding
and StreamBuilder
widgets to show the search metadata.
The StreamBuilder
widget ensures update of the Text
on each _searchMetadata
stream change.
Dart
StreamBuilder
as the second child to the main Column
widget.
Dart
_searchTextController
and _productsSearcher
aren’t connected.
To fix it, override the initState
method of the _MyHomePageState
class and add a listener to the _searchTextController
that propagates the input text to the _productsSearcher
.
Dart

_searchTextController
and _productsSearcher
by overriding the dispose
method of the _MyHomePageState
.
Dart
Results list and infinite scrolling
Now it’s time to show the results themselves and their number with infinite scrolling. Add aProduct
class that represents a search hit.
To keep this example simple,
it contains a name and an image URL field. Declare a fromJson
constructor method for creating Product
from a JSON string.
Dart
infinite_scroll_pagination
library.
Dart
_pagingController
component that handles the infinite scrolling logic as _MyHomePageState
class property.
Dart
HitsPage
class, which represents a page of search results.
Call the fromResponse
factory method which builds a HitsPage
from a SearchResponse
.
Dart
_searchPage
stream which listens to _productSearcher
responses and transforms it to HitsPage
object.
Dart
_hits
function to the _MyHomePageState
class which builds the list of search results.
It returns PagedListView
,
a component of the infinite_scroll_pagination
library,
taking _pagingController
as parameter.
Dart
_hits
function as the third child to the main Column
widget embedded in the Expanded
widget so that it can fill the available screen space.
Dart

_pagingController
and the _productsSearcher
aren’t connected.
To update the _pagingController
whenever a new results page is fetched,
add a listener to __searchPage
in the initState
method.
Add a call to _pagingController.refresh()
to the _searchTextController
listener callback.
Dart

_pagingController
triggered a request for next page, this request wasn’t processed.
To fix it, complete the initState
method by adding a page request listener to _pagingController
.
It triggers the loading of the next page in the _productSearcher
.
Dart

_pagingController
in the dispose
method of the _MyHomePageState
to free up the resources properly.
Dart
Implement results filtering
Now you can add an extra screen to implement filtering of the search results. Start implementing search results filtering by adding aFilterState
property to _MyHomePageState
.
FilterState
is a component that stores the state of applied filters and provides an interface to alter the state.
Dart
FacetList
property which manages the appearance of the list of refinement facets for a designated attribute.
In this guide, the brand
attribute is used.
Dart
_filters
method to present the filtering interface as a list of CheckboxListTiles
embedded in the Scaffold
widget.
The FacetList
class provides a facets
stream,
combining the facets themselves and their selection state as well as a toggle
method that allows to change this state.
Dart
GlobalKey
property to the _MyHomePageState
class.
Dart
- Assign this key to the key property of
Scaffold
in its constructor. - Add
IconButton
to theactions
list of theAppBar
. This triggers opening the end drawer. - Assign the
endDrawer
property ofScaffold
with filters the widget embedded in theDrawer
widget.
Dart


FilterState
to HitsState
in the initState
method,
so that each change of FilterState
triggers a new search request.
Also, each filter state change might refresh the _pagingController
to remove the obsolete loaded pages.
Add the corresponding listener to the _filterState.filters
stream.
Dart
_filterState
and ‘_facetList’ in the dispose
method of the _MyHomePageState
.
Dart
The final result
Find the source code in the Algolia Flutter playground repository on GitHub. The final version of themain.dart
file should look as follows:
Dart
Next steps
This examples shows how to bridge native search with the Algolia Flutter Helper library. You can use it as a basis for more complex applications.- To explore the components in more detail, see the API reference.
- To explore a complete ecommerce app built with Flutter, see the Flutter Ecommerce UI Template.