How to Implement a Dynamic Sorting Algorithm for Search Results in FlutterFlow

Ensure your searchable collection (e.g., articles, products, or listings) has fields: title (String), description (String), category (String), viewCount (Integer), timestamp (Timestamp), tags (String Array). Add a titleLowerCase field that stores the lowercase version of the title for case-insensitive searching. On the SearchPage, add a TextField for the search query. When the user types and presses search, execute a Backend Query on the collection. Use a whereIn or arrayContainsAny filter on tags if applicable, or use a range query on titleLowerCase with startAt and endAt for prefix matching. Limit results to 100 candidates to keep client-side scoring fast.

Create a Custom Function named scoreAndRankResults that takes the search query string and the list of candidate documents as inputs. For each candidate, calculate a relevance score based on weighted factors. Title contains the exact query: add 10 points. Title starts with the query: add 5 bonus points. Description contains the query: add 3 points. Recency: calculate days since timestamp, score = max(0, 5 minus days divided by 30) so newer content scores higher up to 5 points. Popularity: score = min(5, viewCount divided by 100) capping at 5 points. Personalization: if the item's category matches any category the user has viewed before (stored in App State recentCategories), add 3 points. Sum all factors into a total score. Sort the list by score descending and return it.

1// Custom Function: scoreAndRankResults
2double scoreItem(Map<String, dynamic> item, String query, List<String> userCategories) {
3  double score = 0;
4  final title = (item['title'] as String).toLowerCase();
5  final desc = (item['description'] as String).toLowerCase();
6  final q = query.toLowerCase();
7  
8  // Text match scoring
9  if (title.contains(q)) score += 10;
10  if (title.startsWith(q)) score += 5;
11  if (desc.contains(q)) score += 3;
12  
13  // Recency scoring (max 5 points)
14  final days = DateTime.now().difference(item['timestamp'].toDate()).inDays;
15  score += (5 - (days / 30)).clamp(0, 5);
16  
17  // Popularity scoring (max 5 points)
18  score += ((item['viewCount'] ?? 0) / 100).clamp(0, 5);
19  
20  // Personalization scoring
21  if (userCategories.contains(item['category'])) score += 3;
22  
23  return score;
24}
25
26List<Map<String, dynamic>> scoreAndRankResults(
27  List<Map<String, dynamic>> items,
28  String query,
29  List<String> userCategories,
30) {
31  for (var item in items) {
32    item['_score'] = scoreItem(item, query, userCategories);
33  }
34  items.sort((a, b) => (b['_score'] as double).compareTo(a['_score'] as double));
35  return items;
36}

On the SearchPage, bind the ListView to the output of the scoreAndRankResults function. Each result card is a Container showing the title, description snippet, category badge, viewCount, and timestamp. For highlighting matched terms in the title and description, create a Custom Widget that takes the text and query as parameters and renders a RichText widget. The widget splits the text at query match positions and applies bold styling with a yellow background to the matched segments while keeping the rest in normal styling. This visual highlight helps users see why each result matched.

1// Custom Widget: HighlightedText
2import 'package:flutter/material.dart';
3
4class HighlightedText extends StatelessWidget {
5  final String text;
6  final String highlight;
7  final TextStyle baseStyle;
8
9  const HighlightedText({
10    required this.text,
11    required this.highlight,
12    this.baseStyle = const TextStyle(fontSize: 14),
13  });
14
15  @override
16  Widget build(BuildContext context) {
17    if (highlight.isEmpty) return Text(text, style: baseStyle);
18    final lower = text.toLowerCase();
19    final queryLower = highlight.toLowerCase();
20    final List<TextSpan> spans = [];
21    int start = 0;
22    int idx;
23    while ((idx = lower.indexOf(queryLower, start)) != -1) {
24      if (idx > start) spans.add(TextSpan(text: text.substring(start, idx)));
25      spans.add(TextSpan(
26        text: text.substring(idx, idx + highlight.length),
27        style: baseStyle.copyWith(
28          fontWeight: FontWeight.bold,
29          backgroundColor: Colors.yellow.withOpacity(0.3),
30        ),
31      ));
32      start = idx + highlight.length;
33    }
34    if (start < text.length) spans.add(TextSpan(text: text.substring(start)));
35    return RichText(text: TextSpan(style: baseStyle, children: spans));
36  }
37}

For apps needing real full-text search with typo tolerance, synonyms, and faceted filtering, integrate Algolia. In FlutterFlow, go to Settings and configure the Algolia integration with your Application ID and Search API Key. Sync your Firestore collection to an Algolia index using the Firebase Extensions Algolia Search extension. On the SearchPage, switch the Backend Query to Algolia Search Query instead of Firestore. Algolia handles relevance ranking, typo tolerance (finding 'restaurnt' when searching 'restaurant'), and instant results. Configure searchable attributes in the Algolia dashboard, setting title as the primary searchable attribute and description as secondary. Add faceted filtering for category using Algolia facets.

Below the search TextField, add a DropDown for manual sort override with options: Most Relevant (default, uses the scoring algorithm), Newest First (sort by timestamp descending), Most Popular (sort by viewCount descending), and Alphabetical (sort by title ascending). When a user selects a non-relevance sort, bypass the scoring function and apply a simple sort on the selected field. Track search behavior: on each search, log the query, results count, and which result the user tapped to an analytics collection. Use this data to improve scoring weights over time. If certain queries consistently lead to clicks on lower-ranked results, adjust the factor weights.