> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Highlighting

> Visually highlights matched terms in search results.

## About this widget

Displays the [highlighted attributes](/doc/guides/building-search-ui/ui-and-ux-patterns/highlighting-snippeting/flutter) 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 JSON icon=braces theme={"system"}
{
  "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 Dart icon=code theme={"system"}
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 Dart icon=code theme={"system"}
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 Dart icon=code theme={"system"}
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](https://api.flutter.dev/flutter/widgets/RichText-class.html) as follows:

```dart Dart icon=code theme={"system"}
RichText(
    text: TextSpan(
        style: const TextStyle(color: Colors.black),
        children: movie.highlightedTitle!.toInlineSpans(
            highlightedTextStyle: const TextStyle(color: Colors.orange))));
```