Simple Flutter text highlighting at the character-level.

Overview

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" which supports word matches ('Peter''), but substring_highlight has more granular character-by-character matches (e.g., 't' in 'Peter').

Limitations:

  1. Highlighted text is not clickable
  2. Doesn't solve perplexing world problems like hunger and climate change

The substrings being searched for highlighting don't have to match at the beginning of the longer strings (can be anywhere inside).

Even space characters will match, but not be highlighted, obviously.

Ancestor MUST have textDirection set (required by internal RichText widget), either through MaterialApp widget or explicitly wrapped by a Directionality widget:

Directionality(
    child: SubstringHighlight(text: 'Peter', term: 't'),
    textDirection: TextDirection.ltr)

Pull Requests

Pull requests are welcome and I try to merge them within a few days.

Examples

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:

Screenshot

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:

Screenshot

Comments
  • How do I search more than one word separated by whitespace?

    How do I search more than one word separated by whitespace?

    I have the following records: My horse is white. My house is white. My horn is broked.

    When I search with this setence: "ho whit"

    The result of the filter should be : My (ho)rse is (whit)e. >> success My (ho)use is (whit)e.>> success My (ho)rn is broked >> error

    enhancement 
    opened by edukmattos 6
  • Fails building on web

    Fails building on web

    We can't build for web due to this error

    Target dart2js failed: Exception: /opt/hostedtoolcache/flutter/2.2.0-beta/x64/.pub-cache/hosted/pub.dartlang.org/substring_highlight-1.0.26/lib/substring_highlight.dart:5:27:
    Error: The integer literal 9223372036854775807 can't be represented exactly in JavaScript.
    const int int64MaxValue = 9223372036854775807; //HACK
    
    opened by imtoori 0
  • Please Add Support for multi String highlight

    Please Add Support for multi String highlight

    so if I type "pete walks", maybe can get interpreted as ["Pete", "walks"]

    so it can match here "Pete always runs but likes walks more."

    opened by fenchai23 0
  • add onTap event

    add onTap event

    for example

    SubstringHighlight(
        text: 'txt_agreement'.tr,
        terms: [
          'txt_terms_conditions'.tr,
          'txt_privacy_policy'.tr,
        ],
        textAlign: TextAlign.center,
        textStyle: Get.textTheme.headline2!.copyWith(
          fontSize: 12,
          fontWeight: FontWeight.w400,
          letterSpacing: 0,
        ),
        textStyleHighlight: Get.textTheme.bodyText2!.copyWith(
          fontSize: 12,
          fontWeight: FontWeight.w400,
          letterSpacing: 0,
          color: AppColors.accentPrimary,
       ),
        onTap :  (String termName){
           if (termName== 'txt_terms_conditions'.tr, ) ....
       }
    )
    
    opened by astheras 0
  • support ignore diacritics

    support ignore diacritics

    Search are usually case-insensitive and diacritic-insensitive. For example the search term "e" matches "e", "è", "ê"... It would be nice to have an option ignoreDiacritics to highlight diacritics parts when their non-diacritic equivalent is searched

    opened by ronw98 0
  • Support for multiple search terms

    Support for multiple search terms

    Hello. For my use case, I'm looking up names in a list. Therefore, my search term can be multiple words matched to the list in any order.

    In other words, if the user searches for "Doe John" and my list contains "John Doe", both "John" and "Doe" should be highlighted as that list item is matched.

    Would it be possible for the API to take a list of search terms?

    opened by IoanaAlexandru 1
Owner
Peter Alvin
Flutter/Dart app developer
Peter Alvin
Syntax highlighting for Dart and Flutter

highlight.dart Syntax highlighting for Dart and Flutter, which supports lots of languages and themes. View gallery built with Flutter web Package Vers

GitTouch 181 Jan 8, 2023
Masked text field - A flutter package for masked text field for formet your text and good UI

Masked Text Field Masked Text Field Features A package for masked text field for

Alok Dubey 7 Sep 4, 2022
Text analyzer that extracts tokens from text for use in full-text search queries and indexes.

Tokenize text, compute document readbility and compare terms in Natural Language Processing. THIS PACKAGE IS PRE-RELEASE, and SUBJECT TO DAILY BREAKIN

GM Consult Pty Ltd 5 Dec 12, 2022
Low-level link (text, URLs, emails) parsing library in Dart

linkify Low-level link (text, URLs, emails) parsing library in Dart. Required Dart >=2.12 (has null-safety support). Flutter library. Pub - API Docs -

Charles C 60 Nov 4, 2022
Flutter Plugin - Simple character blocked input that usually used for redeem/validation input.

Block Input Simple character blocked input that usually used for redeem code or validation code input. Gallery Example Full example import 'package:bl

Enkh-Amar 7 Nov 2, 2022
Gumao: A Game Character Collector App built using Flutter

Gumao-A Game Character Collector App This Application is made in Flutter ?? & Dart ?? Code Style Design Credits This Design is from Dribbble by Vijay

Abhishek Rajendra Wagh 35 Nov 23, 2022
A Rick and Morty Character Wiki, build in Flutter with Api Rest integration.

Rick and Morty Character Wiki This is an app build in Flutter that loads a list of characters (from the serie Rick and Morty) and his info, and displa

Jessica Aidyl 3 Jul 27, 2022
Symbolic names for character codes in Dart

Character code constants This package can generate constant symbolic names for character codes. The constants can used when working directly with char

Lasse R.H. Nielsen 21 Sep 16, 2022
An application that matches users by their character types

MBTI_Match An application that matches users by their character types. Screenshots Packages Dio A powerful Http client for Dart, which supports Interc

Enis Çakırçalı 6 Jul 3, 2022
An Instagram like text editor Flutter widget that helps you to change your text style.

TextEditor An instagram like text editor widget for flutter Show some ❤️ and star the repo to support the project Features Edit TextStyle object font

Mehdi Zarepour 68 Dec 16, 2022
Grad text package - A Flutter Widget to draw gradients into text

grad_text A Flutter Widget to draw gradients into text.(Null safe) Demo Install

Karthik Sunil K 3 Jan 31, 2022
Detectable text field - Flutter Text widgets with detection features

detectable_text_field Text widgets with detection features. You can detect hasht

null 0 Feb 2, 2022
A text field that displays text on different languages based on your selection.

translatable_text_field A text field that displays text on different languages based on your selection. Its basic idea is that you place this fields i

null 0 Mar 13, 2022
Flutter package for drag-and-drop reordering of two-level lists

drag_and_drop_lists Two-level drag and drop reorderable lists. Features Reorder elements between multiple lists Reorder lists Drag and drop new elemen

Philip Brink 168 Dec 18, 2022
Binding and high-level wrapper on top of libssh - The SSH library!

Dart Binding to libssh version 0.9.6 binding and high-level wrapper on top of libssh - The SSH library! libssh is a multiplatform C library implementi

Isaque Neves 2 Dec 20, 2021
An app that randomly draws Japanese vocabularies from N5 to N1 level to test your listening skill, providing pronunciation and answer checking.

An app that randomly draws Japanese vocabularies from N5 to N1 level to test your listening skill, providing pronunciation and answer checking.

Eric Lau 13 Jul 17, 2022
SoundVolumeView that displays general information and the current volume level for all active sound components in your system, and allows you to instantly mute and unmute them

SoundVolumeView that displays general information and the current volume level for all active sound components in your system, and allows you to instantly mute and unmute them

Domingo 4 Mar 4, 2022
A powerful past paper downloader for IGCSE and A-Level.

Past Paper Finder Past Paper Finder is a past paper downloader for IGCSE and A-Level. It is designed to be as simple as possible and easy to use. Feat

SCIE.DEV 2 Dec 12, 2022
One Dungeon is a ​1-Bit-style platformer game that consists of one level

One Dungeon is a ​1-Bit-style platformer game that consists of one level. It developed during the Midyear 2022 Flame Game Jam.

Bulent Baris Kilic 6 Sep 21, 2022