hashtagable pub package

A widget and functions to implement hashtag-decorated text. Decorates the words start with #

result

Usage

  • As EditableText

If you want to decorate input text, HashTagEditableText will help you.

    HashTagEditableText(
      controller: _textEditingController,
      cursorColor: Theme.of(context).cursorColor,
      basicStyle: TextStyle(fontSize: 14,color:Colors.black),
      focusNode: FocusNode(),
      onChanged: (_) {},
      onSubmitted: (_) {},
      decoratedStyle: TextStyle(fontSize: 14,color:Colors.red),
    ),

decoratedStyle is the textStyle of tagged text. basicStyle is that of untagged text.

  • As RichText

If you want to decorate the text only to display, getHashTagTextSpan() will help you. All you need to do is just putting this function in RichText.

    RichText(
      text: getHashTagTextSpan(
          decoratedStyle: TextStyle(fontSize: 14,color:Colors.red),
          basicStyle: TextStyle(fontSize: 14,color:Colors.black),
          source: "#Hello world. Hello #world",
          onTap: (text) {
            print(text);
          },
      ),
    ),

The argument onTap(String) is called when user tapped tagged text.

Customize hashtag features

  • Check if the text has hashtags
   final hasHashTags = hasHashtags("Hello #World"); 
   // true
   
   final hasHashtags = hasHashtags("Hello World");
   // false
   
  • Extract hashtags from text
   final List<String> hashtags = extractHashtags("#Hello World #Flutter Dart #Thank you");
   // ["#Hello", "#Flutter", "#Thank"]

Decoration rules

The rules are almost same as twitter. It doesn't decorate the tags which contain emoji or symbol. It needs space before # to decorate.

Libraries

annotator
functions
hashtag_editable_text
hashtagable
hint_text_controller