Skip to content

Tips and Tricks

Ismael Sh edited this page Sep 30, 2022 · 4 revisions

Highlighting Matchers

By resolving #31 we can highlight matches (suggestions).
So, to do that, field suggestion includes special made package highlightable.

However, you can use it without field suggestions. So it's independent from FieldSuggestion.

We just have to use HighlightText instead of normal Text widget in our tile's title. So, it basically takes actual text (to highlight) and highlightable word (to provide highlightable letters/words)

FieldSuggestion(
  ...
  itemBuilder: (context, index) {
    return ListTile(
      title: HighlightText(
        suggestionList[index], 
        highlightableWord: textEditingController.text,
        detectWords: true,
      )
    );
  },
)

Excellent Searching

As you know, the search option is required for FieldSuggestion. It gives developers accessibility to use their designing skills. As explained in How It Works article field suggestion uses search algorithm that you defined before to generate matchers from input and suggestions.

  1. Ignore case sensitiveness
    To ignore case sensitiveness, you could make two fields upper-case or lower-case.
FieldSuggestion(
  search: (item, input) {
      return item.toString().toLowerCase().contains(input.toLowerCase());
      
      ... or ...

      return item.toString().toUpperCase().contains(input.toUpperCase());
  }
  ...
)
  1. Make able to auto close suggestion box when, input is empty or selected.
    Note: yes, you can do that without using box controller, which represents the power of providing search algorithm manually.
FieldSuggestion(
  search: (item, input) {
      if(input.isEmpty || item == input) retrun false
      ...
  }
  ...
)
Clone this wiki locally