Comment on page
Algolia Search
You can trigger an Algolia Search using this Action. This will help users to search for documents present inside a Firestore Collection by providing a search term.
From this page, you will learn to define an Algolia Search Action on FlutterFlow.
There are some prerequisites before you start defining the search query:
- A properly configured Algolia account.
- Have at least one Firestore Collection connected to the Algolia account.
- Completed Algolia configuration on FlutterFlow.
If you haven't completed these steps, please follow the instructions present on the following page before proceeding:
You need a text that would be provided as the search term while triggering the search query. Usually, you should take the term as user input. A basic search UI contains a
TextField
and a search IconButton
widget.Follow the steps below to define a search user interface:
- 1.
- 2.You can customize the
TextField
properties to match your app's design style. - 3.Now, drag a
IconButton
widget and drop it onto the canvas. You can use aRow
widget to keep both theTextField
and theIconButton
in the same row. In some cases, it's possible to add them inside theAppBar
as well (watch the demo below). - 4.Change the icon of the
IconButton
widget to a search icon, and customize it if required.

This completes the building of a simple search user interface. Move on to the next step to define the Search Action.
Follow the steps below to define an Algolia Search Action:
- 1.Select the widget (eg.,
IconButton
) on which you want to define the action. - 2.
- 3.Click + Add Action button.
- 4.Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.
- 5.Select the Action Type as Algolia Search.
- 6.Choose the Firebase Collection on which to perform the search.
- 7.Now, you have to define from where to get the Search Term. You can either choose Specific Value or From Variable. If you want to use a
TextField
value as the search term, you should choose From Variable. - 8.If you have chosen Specific Value, define the term inside the field present.
- 9.If you have chosen From Variable, select a Source from the dropdown menu and then select an option from the Available Options. For example, if you want to use the value of a
TextField
, select the Source as Widget State and choose the field name under Available Options. - 10.Finally, you can set the number of maximum search results to fetch under Max Results.

Once you have the Search Action defined, you need to show the results on the UI.
Follow the step below to display the search results in your app:
- 1.Drag and drop a
ListView
widget onto the canvas. Create a widget inside theListView
for displaying each of the search results. - 2.Select the
ListView
widget, click on Generate Dynamic Children from the Properties Panel (right menu). - 3.Enter a Variable Name so that the Algolia search results can be referenced while displaying them inside widgets or while passing it to a different page of the app.
- 4.Select the Source as the name of the results variable where Algolia search data is stored.
- 5.Click Save. Then, click Ok in the dialog box that pops up.
- 6.Set the Algolia Search data correctly to each of the widgets where want to display the data. For example, if you want to show data inside a
Text
widget, select the widget, click Set from Variable, choose Source as the variable name where you stored each of the Algolia search data (in step 3), choose the field name from the Available Options dropdown whose data who want to display, click Save.

You can use the Algolia search result data from any of the widgets present inside the
ListView
. To pass this data to a different page of the app, that page should have a Parameter defined having the same data type.Follow the steps below to define a parameter:
- 1.Go to the page where you want to pass the data.
- 2.
- 3.Click + Add Parameter.
- 4.Enter a Parameter Name.
- 5.Select the Type as Record Reference.
- 6.Choose the Record Type from the dropdown menu.
- 7.Click Save.

Follow the steps below to pass each to the search result to a different page:
- 1.
- 2.
- 3.Click + Add Action button.
- 4.Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.
- 5.Select the Action Type as Navigate.
- 6.Choose Navigation Type as Navigate to Page, select the page under Navigate To.
- 7.Click + Pass in Parameter.
- 8.Select the Parameter name from the dropdown.
- 9.Choose the Source as the Algolia search result variable and select reference under Available Options.

You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.
NOTE: This section is for users who might want to make some additional modifications to the generated code, or want to understand the code that is generated by FlutterFlow behind the scenes.
The generated code for the Algolia Search Action is as follows:

In the above code,
search()
method is used on the Firestore Collection object to trigger the Search Action. The search term is provided from a TextField
using textController.text
, and the maximum results to be returned is set to 20.Once the search results are successfully retrieved, the results are set to the
algoliaSearchResult
variable, and finally setState()
is called to update the page.Last modified 4mo ago