flutter_text_highlight 0.8.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 79

pub

Highlight Text Plugin #

A flutter package to highlight words from a text.

Usage #

To use this package, add flutter_text_highlight as a dependency in your pubspec.yaml file.

Getting Started #

With this package you can highlight words and create specific actions for each highlighted word, you can customize the style of each word separately or create a unique style for all of them, you can also customize the style of the rest of the text.

Example #

Import the highlight library

import 'package:flutter_text_highlight/flutter_text_highlight.dart';

You should use the HighlightedWord class to specify the dictionary words in a Map object

Map<String, HighlightedWord> words = {
    "Flutter": HighlightedWord(
        onTap: () {
            print("Flutter");
        },
        textStyle: textStyle,
    ),
    "open-source": HighlightedWord(
        onTap: () {
            print("open-source");
        },
        textStyle: textStyle,
    ),
    "Android": HighlightedWord(
        onTap: () {
            print("Android");
        },
        textStyle: textStyle,
    ),
};

Now you can call the TextHighlight widget

TextHighlight(
    text: text, // You need to pass the string you want the highlights
    words: words, // Your dictionary words
    textStyle: TextStyle( // You can set the general style, like a Text()
        fontSize: 20.0,
        color: Colors.black,
    ),
    textAlign: TextAlign.justify, // You can use any attribute of the RichText widget
),

0.7.0 Update #

Now you can choose to differentiate words with upper and lower case. To differentiate words by uppercase or lowercase letters just use as in the previous examples. To not differentiate words (text == TeXt) use the new HighlightMap class by passing its word library as a parameter.

HighlightMap highlightMap = HighlightMap(words);

And then you pass the highlightMap.getMap as the words parameter in the TextHighlight widget

TextHighlight(
    text: text,
    words: highlightMap.getMap,
),

0.8.2 #

Added support for highlight of multiple words.

0.8.1 #

Fixed RangeError (index): Invalid value: Valid value range is empty: -1 exception with empty text.

0.7.2 #

Health suggestions.

0.7.1 #

Some corrections in the example.

0.7.0 #

Now you can choose to differentiate words with upper and lower case.

0.6.0 #

Fixed the problem of the last word is not always highlighted.

0.5.0 #

RangeError Solved. Thanks to Artem

0.4.0 #

If the highlighted word has special characters then it is only highlighted if it has only one character.

0.3.0 #

Now the highlights work in words followed by special characters, numbers or complementary words.

0.2.0 #

The meaning attribute was removed from the HighlightedWord class; the onTap is working normally.

0.0.1+2 #

Minor maintenance fixes

0.0.1+1 #

Example correction

0.0.1 #

With this package you can highlight words and create specific actions for each highlighted word, you can customize the style of each word separately or create a unique style for all of them, you can also customize the style of the rest of the text.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_text_highlight/flutter_text_highlight.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final String text =
      "Flutter is an open-source mobile application development framework created by Google. It is used to develop applications for Android and iOS, as well as being the primary method of creating applications for Google Fuchsia.";

  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = TextStyle(
        color: Colors.red,
        fontSize: 20.0,
        decoration: TextDecoration.underline);
    Map<String, HighlightedWord> words = {
      "flutter": HighlightedWord(
        onTap: () {
          showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text("Flutter"),
                  content: Text(
                      "Flutter's engine, written primarily in C++, provides low-level rendering support using Google's Skia graphics library."),
                  actions: <Widget>[
                    FlatButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text("Ok"),
                    )
                  ],
                );
              });
        },
        textStyle: textStyle,
      ),
      "Open-source": HighlightedWord(
        onTap: () {
          showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text("open-source"),
                  content: Text(
                      "Open-source software (OSS) is a type of computer software in which source code is released under a license in which the copyright holder grants users the rights to study, change, and distribute the software to anyone and for any purpose."),
                  actions: <Widget>[
                    FlatButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text("Ok"),
                    )
                  ],
                );
              });
        },
        textStyle: textStyle,
      ),
      "mobile application": HighlightedWord(
        onTap: () {
          showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text("mobile application"),
                  content: Text("mobile application bla bla bla"),
                  actions: <Widget>[
                    FlatButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text("Ok"),
                    )
                  ],
                );
              });
        },
        textStyle: textStyle,
      ),
      "Android": HighlightedWord(
        onTap: () {
          showDialog(
              context: context,
              builder: (contextb) {
                return AlertDialog(
                  title: Text("Android"),
                  content: Text(
                      "Android is a mobile operating system developed by Google."),
                  actions: <Widget>[
                    FlatButton(
                      onPressed: () {
                        Navigator.of(contextb).pop();
                      },
                      child: Text("Ok"),
                    )
                  ],
                );
              });
        },
        textStyle: textStyle,
      ),
      "iOS": HighlightedWord(
        onTap: () {
          showDialog(
              context: context,
              builder: (contextb) {
                return AlertDialog(
                  title: Text("iOS"),
                  content: Text(
                      "iOS is a mobile operating system created and developed by Apple Inc. exclusively for its hardware."),
                  actions: <Widget>[
                    FlatButton(
                      onPressed: () {
                        Navigator.of(contextb).pop();
                      },
                      child: Text("Ok"),
                    )
                  ],
                );
              });
        },
        textStyle: textStyle,
      ),
      "Google Fuchsia": HighlightedWord(
        onTap: () {
          showDialog(
              context: context,
              builder: (contextb) {
                return AlertDialog(
                  title: Text("Fuchsia"),
                  content: Text(
                      "Fuchsia is a capability-based operating system currently being developed by Google."),
                  actions: <Widget>[
                    FlatButton(
                      onPressed: () {
                        Navigator.of(contextb).pop();
                      },
                      child: Text("Ok"),
                    )
                  ],
                );
              });
        },
        textStyle: textStyle,
      ),
      /*"Google": HighlightedWord(
        onTap: () {
          showDialog(
              context: context,
              builder: (contextb) {
                return AlertDialog(
                  title: Text("Google"),
                  content: Text(
                      "Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware. It is considered one of the Big Four technology companies, alongside Amazon, Apple and Facebook."),
                  actions: <Widget>[
                    FlatButton(
                      onPressed: () {
                        Navigator.of(contextb).pop();
                      },
                      child: Text("Ok"),
                    )
                  ],
                );
              });
        },
        textStyle: textStyle,
      ),*/
    };
    HighlightMap highlightMap = HighlightMap(words);
    return Scaffold(
      appBar: AppBar(
        title: Text("Text Highlight Example"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: SafeArea(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 16.0,
              ),
              TextHighlight(
                text: text,
                words: highlightMap.getMap,
                textStyle: TextStyle(
                    fontSize: 20.0,
                    color: Colors.black,
                    decoration: TextDecoration.none),
                textAlign: TextAlign.justify,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_text_highlight: ^0.8.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_text_highlight/flutter_text_highlight.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
57
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
79
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • flutter_text_highlight that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test