Highlighting

Displays the highlighted attributes of your search results. The HighlightedString objects simplify highlighting the right words in a search response that match your query.

Examples

Consider a movies index. Each movie record consists of two fields: title and year. Algolia’s response to the query “red” could look like:

JSON

{
  "objectID": "439817390",
  "title": "The Shawshank Redemption",
  "_highlightResult": {
    "title": {
      "value": "The Shawshank <em>Red</em>emption",
      "matchLevel": "full",
      "fullyHighlighted": false,
      "matchedWords": ["red"]
    }
  }
}

To display those movies in your interface, you likely have created a data class that looks something like the following:

Dart

class Movie {

  String? title;

  Movie({this.title});

  static Movie fromHit(Hit hit) {
    return Movie(title: hit['title']);
  }

}

It includes a static method to build a Movie instance from the Hit object.

Extract highlighted strings from search hit JSON

Complete the Movie class with the highlightedTitle property of the HighlightedString type. Update the fromJson method so that it parses the HighlightedString from the hit using the getHighlightedString method.

Dart

class Movie {
  String? title;
  HighlightedString? highlightedTitle;

  Movie({this.title, this.highlightedTitle});

  static Movie fromJson(Hit hit) {
    return Movie(
        title: hit['title'],
        highlightedTitle: hit.getHighlightedString('title'));
  }
}

A HighlightedString can be created directly from the raw tagged string.

Dart

final rawHighlightedTitle = 'The Shawshank <em>Red</em>emption';
final highlightedTitle = HighlightedString.of(rawHighlightedTitle);

Using highlighted strings in Flutter

The HighlightedString provides a toInlineSpans() method which produces a list of InlineSpan instances. The highlightedTextStyle parameter of this method defines the style of the highlighted part of the text. These instances, in turn, can be used as a parameter in Flutter’s RichText widget as follows:

Dart

RichText(
    text: TextSpan(
        style: const TextStyle(color: Colors.black),
        children: movie.highlightedTitle!.toInlineSpans(
            highlightedTextStyle: const TextStyle(color: Colors.orange))));

Algolia for Flutter

About this widget

Examples

Extract highlighted strings from search hit JSON

Using highlighted strings in Flutter

​About this widget

​Examples

​Extract highlighted strings from search hit JSON

​Using highlighted strings in Flutter

About this widget

Examples

Extract highlighted strings from search hit JSON

Using highlighted strings in Flutter