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.
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:
Algolia Search
Building Search UI
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, the TextField is placed inside the AppBar of the app).
2.You can customize the TextField properties to match your app's design style. Add a search Icon 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 two Text widgets are added inside a Column).
Define Algolia Search Backend Query
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.Select Backend Query from the Properties panel (the right menu).
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.
Display Search Results
Follow the step below to display the search results inside the ListView:
1.Select a widget present inside the ListView, for example, a Text widget.
2.Click Set from Variable from the Properties Panel (right menu).
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.
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. 
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, otherwise snapshot.data is used to retrieve the response. Then it's checked whether the response is empty and a widget is displayed accordingly.
References
Learn more about FutureBuilder from here.
FlutterFlow uses the algolia package for accessing the Algolia Search APIs.
​Algolia documentation​

API Call Query

Next - Data and Backend

API Calls

Last modified 8mo ago

Copy link

On this page

Prerequisites

Building Search UI

Define Algolia Search Backend Query

Display Search Results

Code Overview

References