“This is the 29th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021”

We have completed the related functions of the search input box in the last article. Next, we will fully realize the whole search function and result display.

To realize the function of entering text to appear search results, it is necessary to pass the previous data list to the search page when jumping:

  • Click on the home page search, need to get the data, jump to the search page;
  • The search boxSearchBarThe content of the input box is returned to the search in real time;
  • Search page basedSearchBarContent returned, real-time filtering data;

Pass values to the search screen

To pass a value to the search screen we first need to pass a value to ChatSearchCell, passing the list to ChatSearchCell, which we define as follows:

When creating ChatSearchCell, pass a value to the constructor:

So, we’re passing the data to ChatSearchCell, and then when we click on ChatSearchCell, we’re passing the data to the search page;

We add the following constructor to SearchPage:

When clicking ChatSearchCell to jump to SearchPage, pass the chat list data:

Get input

Next we need to get the text information entered by the user in the search box. In order to separate the search box from the business as much as possible and handle independent events, we return the text content to the search page through the SearchBar constructor:

If the text changes, call this method:

Now we can retrieve the user’s input in the SearchPage SearchPage:

Display search results

We isolate a method to process text, and then filter the list data from the method to get the search results. We define a resultList on the search page to receive the data list of the search results:

final List<Chat> _resultList = [];
Copy the code

The search data is then processed in the _searchMessage method:

Let’s first improve the search method, the search results will be displayed, the code and the effect is as follows:

Let’s improve the ListView display:

Keywords are highlighted

We’ve been able to rely on input. The contact list is matched. Now for the final effect, our search content, the keyword, needs to be highlighted above the name in the list;

We define a method _textHighlighted, in which we build the highlighted name widget. The method defaults to the following:

  Widget _textHighlighted(String name) {

    return Text(name);
  }
Copy the code

TextSpan

To highlight text, we use a widget called TextSpan, which is defined as follows:

  const TextSpan({
    this.text,
    this.children,
    TextStyle? style,
    this.recognizer,
    MouseCursor? mouseCursor,
    this.onEnter,
    this.onExit,
    this.semanticsLabel,
    this.locale,
    this.spellOut,
  })
Copy the code

We highlight a few of the more common attributes:

  • text: The content of the text fragment;
  • style: The style of the text fragment;
  • children: is aTextSpanArray, i.e.,TextSpanYou can include othersTextSpan;
  • recognizer: Gesture recognition is processed on the text fragment;

Get key

First we need to get the search keyword:

Process highlighted text

Dart: Name is split by keyword. Dart: Name is split by keyword. Dart: Name is split by keyword.

We find that name is separated by _keyText to form an array of strings. In the array, we find the following pattern:

  • The empty string is the keyword itself;
  • The non-empty string cannot be the last one; otherwise, more keywords will be concatenated.
  • If the empty string is the last character, the keyword cannot be concatenated;

According to these three rules, we can restore the text information;

Let’s first define the display effect of two types of text:

Next, the _textHighlighted method code is as follows:

Note that the conditions in the red box are essential, otherwise the following will occur:

The complete code of the final search page is as follows:

The final effect is as follows: