How to highlight searched words in Flutter

Question

I want to bold the words that I typed like this.

I tried using RichText, but it is fixed only in one place, and search text can be center, start, end.

Is there any way for me to do that?

Answer 1

You can use flutter_markdown import 'package:flutter/material.dart';

import 'package:flutter_markdown/flutter_markdown.dart';

class HighlightedText extends StatelessWidget {
  const HighlightedText({
    Key? key,
    required this.text,
    required this.highlightedText,
    this.highlightedTextStyle = const TextStyle(fontWeight: FontWeight.bold),
    this.normalTextStyle = const TextStyle(),
  }) : super(key: key);

  final String text;
  final String highlightedText;
  final TextStyle highlightedTextStyle;
  final TextStyle normalTextStyle;

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Markdown(
      styleSheet: MarkdownStyleSheet(
        strong: highlightedTextStyle,
        p: normalTextStyle,
      ),
      data: text.replaceAll(highlightedText, '**$highlightedText**'),
    );
  }
}

Answer 2

I found an easy solution using flutter_html

String highlightWord(String query, String text) {
     String result = text.replaceFirst('$query', '<b>$query</b>');
     return result;
   }

then

Html(data: highlightWord(query, suggestionList[index].name)

it works very well for me

Answer 3

As @pskink noted, you can use TextSpan with RichText. Here's an idea of how you can implement it:

class _MyWidgetState extends State<MyWidget> {
  String _text;
  
  static const List<String> _texts = [
    // At the start of the text
    "Flutter - Beautiful native apps in record time",
    // Enclosed with quotes
    "Newest 'flutter' Questions - StackOverflow",
    // At the middle of the text
    "Github: Flutter makes it easy and fast to deploy..."
  ];
  
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        TextFormField(
          // Every time you type in the text field, update
          // the widget with the new text to search
          onChanged: (text) => setState(() => _text = text)
        ),
        ..._texts.map((text) {
          // If no text was typed, return the text itself
          if (_text == null) return Text(text);
          
          // Find the start index of the search text
          final int i = text.toLowerCase()
            .indexOf(_text.toLowerCase());
          
          // If text is not present, return the text itself
          if (i == -1) return Text(text);

          return RichText(
            text: TextSpan(
              style: TextStyle(
                color: Colors.black,
                fontSize: 15,
              ),
              children: [
                // From the start of the text to the start of
                // the search text, make it the default style
                TextSpan(text: text.substring(0, i)),
                // From the start of the search text to the end
                // of the search text, make it the bold style
                TextSpan(
                  text: text.substring(i, i + _text.length),
                  style: TextStyle(fontWeight: FontWeight.bold)
                ),
                // From the end of the search text to the end
                // of the text, make it the default style
                TextSpan(text: text.substring(i + _text.length)),
              ]
            )
          );
        }),
      ]
    );
  }
}