substring_highlight

highlight flutter text at the character-level. designed for case-insensitive search-term highlighting, a single search term sub-string is highlighted (perhaps multiple times) within a longer string. inspired by the existing flutter package “highlight_text,” but supports sub-word character matches (e.g., ‘t’ in ‘peter’). limits: only supports a single search term and does not support clickable highlighted sub-strings.

the substrings being searched for highlighting don’t have to match at the beginning of the longer strings (can be anywhere inside, case-insensitive).

even space characters will match, but not be highlighted, per se.

ancestor must have {textdirection} set, either through {materialapp widget} or explicitly wrapped by a {directionality} widget:

directionality(child: substringhighlight(text: 'peter', term: 't'), textdirection: textdirection.ltr)

default styling example

code:

as an example, the following code snippet uses this package to highlight matching characters in each search result:

import 'package:substring_highlight/substring_highlight.dart';

...

  @override
  widget build(buildcontext context) {
    return container(
      padding: const edgeinsets.all(12),
      child: substringhighlight(
        text: dropdownitem,     // search result string from database or something
        term: searchterm,       // user typed "et"
      ),
    );
  }

output:

customized styling example

code:

this example adds ‘textstyle’ and ‘textstylehighlight’ to change the colors of the text:

import 'package:substring_highlight/substring_highlight.dart';

...

  @override
  widget build(buildcontext context) {
    return container(
      padding: const edgeinsets.all(12),
      child: substringhighlight(
        text: dropdownitem,                         // each string needing highlighting
        term: searchterm,                           // user typed "m4a"        
        textstyle: textstyle(                       // non-highlight style                       
          color: colors.grey,
        ),
        textstylehighlight: textstyle(              // highlight style
          color: colors.black,
          decoration: textdecoration.underline,
        ),        
      ),
    );
  }

output: