how can I implement something like this.

I want to change color of the given characters in the search bar in the items down bellow.

CodePudding user response：

To achieve that depends on what's the data source and how you would handle white spaces. A quick work around.

String search;

TextStyle positiveColorStyle = TextStyle(color: Colors.blue),
TextStyle negativeColorStyle = TextStyle(color: Colors.black);


TextSpan searchMatch(String match) {
  if (search == null || search == "")
    return TextSpan(text: match, style: negativeColorStyle);
  var refinedMatch = match.toLowerCase();
  var refinedSearch = search.toLowerCase();
  if (refinedMatch.contains(refinedSearch)) {
    if (refinedMatch.substring(0, refinedSearch.length) == refinedSearch) {
      return TextSpan(
        style: posRes,
        text: match.substring(0, refinedSearch.length),
        children: [
          searchMatch(
            match.substring(
              refinedSearch.length,
            ),
          ),
        ],
      );
    } else if (refinedMatch.length == refinedSearch.length) {
      return TextSpan(text: match, style: positiveColorStyle);
    } else {
      return TextSpan(
        style: negativeColorStyle,
        text: match.substring(
          0,
          refinedMatch.indexOf(refinedSearch),
        ),
        children: [
          searchMatch(
            match.substring(
              refinedMatch.indexOf(refinedSearch),
            ),
          ),
        ],
      );
    }
  } else if (!refinedMatch.contains(refinedSearch)) {
    return TextSpan(text: match, style: negativeColorStyle);
  }
  return TextSpan(
    text: match.substring(0, refinedMatch.indexOf(refinedSearch)),
    style: negativeColorStyle,
    children: [
      searchMatch(match.substring(refinedMatch.indexOf(refinedSearch)))
    ],
  );
}

Then call the method and pass the searched text as parameter:

Credit: https://medium.com/@nogadev/highlight-search-results-in-flutter-66f03974ddec

CodePudding user response：

You should cut your String in two part. With a substring for example

String str = "Dolania Travel"
String firstPart = str.substring(0, 2);
String secondPart = str.substring(2, str.lenght);

And use RichText Example :

RichText(
       text: TextSpan(style: TextStyle(color: Colors.black),
                            children: [
                              TextSpan(
                                text: firstPart,
style: TextStyle(color: Colors.blue),
                              ),
                              TextSpan(
                                text: secondPart,
                              ),
                            ]
                        ),

CodePudding user response：

I would try something along these lines. I didn't test this, so there might be some indexes wrong, but this general idea should work.

    Widget createText(String name) {
      final _stringToMatch = controller.text;
      if (!name.toLowerCase().contains(_stringToMatch)) {
        return Text(name);
      }
      final _start = name
          .toLowerCase()
          .indexOf(_stringToMatch); // gives index where match starts
      final _end =
          _start   _stringToMatch.length - 1; // gives index where match ends
      final _customText = TextSpan(
          text: name.substring(_start, _end),
          style: Theme.of(context).textTheme.bodyText1!.copyWith(
                color: Colors.red,
              ));

      return RichText(
        text: TextSpan(
          text: '',
          style: DefaultTextStyle.of(context).style,
          children: <TextSpan>[
            if (_start == 0) _customText,
            TextSpan(text: name.substring(0, _start)),
            if (_start != 0) _customText,
            if (_end != name.length - 1)
              TextSpan(text: name.substring(_end, name.length)),
          ],
        ),
      );
    }

    names.map((name) {
      return createText(name);
    });