How to Implement a Custom Search Engine in FlutterFlow

Log in to your Algolia dashboard at dashboard.algolia.com. Create a new Application, then create an Index named after your Firestore collection (e.g., 'products'). In the Index Settings, go to 'Searchable Attributes' and list only the fields users should search: title, description, category, tags. Do NOT include email, phone, userId, paymentInfo, or any PII. Under 'Attributes for Faceting', add: category, brand, priceRange, inStock. Under 'Ranking', move your most important attribute (e.g., 'popularity') to the top of the custom ranking. Copy your Application ID, Search-Only API Key (for client use), and Admin API Key (for Cloud Functions only — never expose this in the app).

In your Firebase project, open the Functions directory in a code editor. Install the algoliasearch package: npm install algoliasearch. Create a new file syncToAlgolia.js. Write three exported functions: onProductCreate (triggers on Firestore document create), onProductUpdate (triggers on update), and onProductDelete (triggers on delete). Each function should initialize the Algolia client using environment variables ALGOLIA_APP_ID and ALGOLIA_ADMIN_KEY, then call index.saveObject for create/update or index.deleteObject for delete. Store only the safe searchable fields — not the entire Firestore document. Deploy with: firebase deploy --only functions. Set the environment variables with: firebase functions:config:set algolia.app_id='YOUR_ID' algolia.admin_key='YOUR_KEY'.

1// functions/syncToAlgolia.js
2const functions = require('firebase-functions');
3const algoliasearch = require('algoliasearch');
4
5const client = algoliasearch(
6  functions.config().algolia.app_id,
7  functions.config().algolia.admin_key
8);
9const index = client.initIndex('products');
10
11// Sync on create
12exports.onProductCreate = functions.firestore
13  .document('products/{productId}')
14  .onCreate(async (snap, context) => {
15    const data = snap.data();
16    await index.saveObject({
17      objectID: context.params.productId,
18      title: data.title,
19      description: data.description,
20      category: data.category,
21      brand: data.brand,
22      priceRange: data.priceRange,
23      inStock: data.inStock,
24      imageUrl: data.imageUrl,
25    });
26  });
27
28// Sync on update
29exports.onProductUpdate = functions.firestore
30  .document('products/{productId}')
31  .onUpdate(async (change, context) => {
32    const data = change.after.data();
33    await index.partialUpdateObject({
34      objectID: context.params.productId,
35      title: data.title,
36      description: data.description,
37      category: data.category,
38      brand: data.brand,
39      priceRange: data.priceRange,
40      inStock: data.inStock,
41    });
42  });
43
44// Remove on delete
45exports.onProductDelete = functions.firestore
46  .document('products/{productId}')
47  .onDelete(async (snap, context) => {
48    await index.deleteObject(context.params.productId);
49  });

In FlutterFlow, create a new Search page. Add a TextField widget at the top with placeholder 'Search products...'. Create a Page State variable 'searchQuery' (String) and a 'searchResults' variable (JSON or a List of your result type). Bind the TextField's value to searchQuery. Add an onChange Action Flow that updates searchQuery from the field value, then calls a Custom Action named 'searchAlgolia'. For autocomplete, also create a 'suggestions' Page State variable (String List) and display them in a small overlay ListView that appears below the search field when suggestions is not empty. Tapping a suggestion sets the searchQuery TextField to that value and triggers a full search.

Below the search bar, add a horizontal ScrollView containing filter chips or checkboxes for each facet (category, brand, priceRange, inStock). Create Page State variables for each active filter: 'selectedCategories' (String List), 'selectedBrands' (String List), 'inStockOnly' (Boolean). When any filter changes, call the searchAlgolia Custom Action again with the updated filter parameters. In the Custom Action, pass facetFilters to the Algolia search call: e.g., facetFilters: [['category:Electronics', 'category:Clothing'], 'inStock:true']. The array-of-arrays syntax means OR within the inner array and AND between outer elements.

Algolia returns a '_highlightResult' object with each search hit, containing HTML-marked versions of matching text (e.g., 'Wireless <em>headphone</em>s'). In your Custom Action, extract the highlight snippet for the title and description fields. Since FlutterFlow's Text widget does not support HTML by default, use a Custom Widget that renders the highlighted text using Flutter's Text.rich() with a TextSpan that bolds or colors the matched portion. Alternatively, strip the HTML tags and use a simple bold style on the matched substring using a Custom Function named 'parseHighlight'.

1// Custom Function: parseHighlight
2// Strips Algolia <em> tags and returns plain text with match position
3Map<String, dynamic> parseHighlight(String highlightedText) {
4  final RegExp emTag = RegExp(r'<\/?(em)>');
5  final plainText = highlightedText.replaceAll(emTag, '');
6  final matchStart = highlightedText.indexOf('<em>');
7  int matchEnd = -1;
8  if (matchStart >= 0) {
9    final afterStart = highlightedText.substring(matchStart + 4);
10    final endTag = afterStart.indexOf('</em>');
11    matchEnd = matchStart + (endTag >= 0 ? endTag : 0);
12  }
13  return {
14    'text': plainText,
15    'matchStart': matchStart,
16    'matchEnd': matchEnd,
17  };
18}

At the end of your searchAlgolia Custom Action, after receiving results, write a document to a Firestore 'searchLogs' collection. Include: query (String), resultCount (Integer), filters applied (Map), userId (String, from currentUser), timestamp (DateTime), and queryId (String, from Algolia's queryID field if you enable clickAnalytics). This data powers a simple analytics dashboard showing top searches, zero-result queries, and filter usage patterns. Review zero-result queries weekly to find content gaps or synonym opportunities in your Algolia index configuration.