Algolia Search Query
You can set up an Algolia Search backend query to automatically trigger a search once the user navigates to the page. This will help users to find any document present inside a Firestore Collection by providing a search term.
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 will need a text to be used as the search term while using the Algolia search backend query. Let's build a search UI to take the term as user input and display the results returned from the query in a list. You can use a
TextField
to take the search term as input and a ListView
to display the results.Follow the steps below to create this UI:
- 1.Drag a
TextField
widget from the Widget Panel and drop it onto the canvas. (In the demo below, theTextField
is placed inside theAppBar
of the app). - 2.You can customize the
TextField
properties to match your app's design style. Add a searchIcon
to signify that it's a search field. - 3.Check the Update Page On Change checkbox. This helps to update the page as the user types inside the
TextField
. This would be required to use the latest text field value as the search term. - 4.Set an Update Delay (in milliseconds). This specifies the amount of time after the user stops typing to update the page.
- 5.Now, drag and drop a
ListView
widget onto the canvas. - 6.Similarly, you can add widgets inside the
ListView
that you need for displaying the search result. (In the following demo, you will find that twoText
widgets are added inside aColumn
).

Once the UI of the page is ready, you can move on to the next step, that is, defining an Algolia Search Backend Query.
Follow the steps below to define the Backend Query:
- 1.Select the widget (or page) on which to apply the query. In this case, it's recommended to apply the query on the
ListView
widget. - 2.
- 3.Select the Query Type as Algolia Search.
- 4.Choose the Firebase Collection on which to perform the search.
- 5.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. - 6.If you have chosen Specific Value, define the term inside the field present.
- 7.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. - 8.Set the number of maximum search results to fetch under Max Results. Keep this field blank if you want to fetch all the matching search results.

Follow the step below to display the search results inside the
ListView
:- 1.Select a widget present inside the
ListView
, for example, aText
widget. - 2.
- 3.From the Source dropdown menu, choose the response of the Algolia Search that you had defined on the ListView widget.
- 4.Under Available Options select the name of the field whose value you want to use.
- 5.(Optional) You can specify a Default Value that would be shown if the field value is empty.
- 6.Click Save.
- 7.Repeat Steps 1 to 6 for using the search response data on any other widget.

If you want to pass the Algolia Search results to another page of your app, follow the instructions present here.
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.
On that View Code page, if you select any particular widget of the page, only that portion of the code will be displayed.
You'll find the code generated for the Algolia Search backend query by selecting the
ListView
widget, the code will be similar to this:FutureBuilder<List<ToDoListRecord>>(
future: ToDoListRecord.search(
term: textController.text,
maxResults: 10,
),
builder: (context, snapshot) {
if (!snapshot.hasData) {
// widget to display while the backend query
// is still running
return Center(
child: SizedBox(
width: 50,
height: 50,
child: CircularProgressIndicator(
color: Color(0xFFE53935),
),
),
);
}
// retrieve the search results
List<ToDoListRecord> listViewToDoListRecordList = snapshot.data;
// widget to display when there is no search result
if (snapshot.data.isEmpty) {
return Container(
height: 100,
child: Center(
child: Text('No results.'),
),
);
}
// widget to display if there are search results present
return ListView.builder(
// ...
);
}
)
- FlutterFlow uses a
FutureBuilder
to handle the search backend query. - In the
future
property, the search query is specified along with the search term and the maximum results to display. - Inside the
builder
, it is checked whether the response is available. If it's still processing a progress indicator is shown, otherwisesnapshot.data
is used to retrieve the response. Then it's checked whether the response is empty and a widget is displayed accordingly.
Last modified 1yr ago