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.

Prerequisites

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:

pageAlgolia Search

Building Search UI

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. Drag a TextField widget from the Widget Panel and drop it onto the canvas.

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 a Row widget to keep both the TextField and the IconButton in the same row. In some cases, it's possible to add them inside the AppBar 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.

Define Algolia 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. Select Actions from the Properties panel (the right menu).

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.

Display Search 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 the ListView 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.

Passing Search Result to another page

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. Click Define parameters button present on top of the Properties Panel.

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. Select the widget present inside the ListView on which you want to apply the Navigate Action.

2. Select Actions from the Properties panel (the right menu).

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.

Code Overview

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.

References

• FlutterFlow uses the algolia package for accessing the Algolia Search APIs.

• Want to know how you can use multiple actions? Check out this page.

• FlutterFlow app template using Algolia Search action: Courts.