> ## 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.
export const FlavorSwitcher = ({current, baseHref = "", options = [], label = "InstantSearch framework"}) => {
if (options.length === 0) {
return
FlavorSwitcher requires at least one option.
;
}
const selected = options.find(option => option.value === current) ?? options[0];
return ;
};
{/* vale Algolia.HeadingPronouns = NO */}
## 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 Redemption",
"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 Redemption';
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))));
```