Simple Inherited Widget to highlight text in a search result

October 1, 2022 Search, Text, Text Field, Widgets

Simple Inherited Widget to highlight text in a search result, with custom highlight Color and highlight TextStyle.

Features

Highlight text in a search result with custom highlight Color and highlight TextStyle.
Highlight text in a search result without prasing the search text directly.
Parse the search text as a regular expression.

Usage

 SearchTextInheritedWidget(
  searchText: 'search text',
  child: SearchHighlightText('text to highlight'),
 ),
 
 // or
SearchTextInheritedWidget(
  // you can use any RegExp here, like RegExp('[1-9]'), RegExp('search text with RegExp', caseSensitive: false), etc.
  searchRegExp: RegExp('search text with RegExp'), 
  child: SearchHighlightText('text to highlight'),
),

Example

See full example in repo.

// search_view.dart

class SearchView extends ConsumerWidget {
  const SearchView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    var controller = ref.watch(searchController);

    return GestureDetector(
      onTap: () {
        FocusManager.instance.primaryFocus?.unfocus();
      },
      child: Scaffold(
        backgroundColor: Colors.grey[100],
        appBar: AppBar(
          title: const Text('Search Movies Example'),
        ),
        body: Column(
          children: [
            const SizedBox(
              height: 10,
            ),
            SearchField(
              controller: controller,
            ),
            Expanded(
              child: controller.isLoading
                  ? const Center(
                      child: CircularProgressIndicator(),
                    )
                  : SearchTextInheritedWidget(
                      searchText: controller
                          .searchText, // <-- Here we pass the search text to the widget tree to be used by the SearchHighlightText widget
                      child: ListMoviesWidget(
                        listMovies: controller.movies,
                      ),
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

// movie_card.dart

class MovieCard extends StatelessWidget {
  const MovieCard({Key? key, required this.movie}) : super(key: key);

  final MovieModel movie;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: SearchHighlightText( // <-- Here we use the SearchHighlightText widget to highlight the search text (if any) in the movie title
          movie.title,
        ),
        subtitle: Text(movie.year),
        leading: SizedBox(
          width: 100,
          child: Image.network(
            movie.posterUrl,
            fit: BoxFit.cover,
            errorBuilder: (context, error, stackTrace) {
              return const Icon(Icons.error);
            },
          ),
        ),
      ),
    );
  }
}