detectable_text_field

Text widgets with detection features. You can detect hashtags, at sign, url, or anything you want. Helps you develop Twitter like app.

Refinement of hashtagable.

final

Usage

DetectableTextField

    DetectableTextField(
      detectionRegExp: detectionRegExp(),
      detectedStyle: TextStyle(
        fontSize: 20,
        color: Colors.blue,
      ),
    )

detectionRegExp decides the text to detect.
detectedStyle is the textStyle for detected text.

DetectableTextEditingController

DetectableTextEditingController allows you to listen to the typingDetection. Ideal for features like live hashtag or mention detection.


    final controller = DetectableTextEditingController(
      regExp: detectionRegExp(),
    );
    
    @override
    void initState() {
      super.initState();
      controller.addListener(() {
        setState(() {});
      });
    }
    
    @override
    Widget build(BuildContext context) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'Typing detection: ${controller.typingDetection}',
          ),
          DetectableTextField(
            controller: controller,
          ),
        ],
      );
    }

DetectableTextEditingController extends TextEditingController, so you can use it with TextField, TextFormField or any other widgets that accept TextEditingController.

If you use flutter_hooks, useDetectableTextEditingController is also available.

DetectableText

If you want to use detection feature in the text only to display, use DetectableText.

    DetectableText(
      text: "#HashTag and @AtSign and https://pub.dev/packages/detectable_text_field",
      detectionRegExp: detectionRegExp(),
      detectedStyle: TextStyle(
        fontSize: 20,
        color: Colors.blue,
      ),
      basicStyle: TextStyle(
        fontSize: 20,
      ),
      onTap: (tappedText){
        print(tappedText);
      },
    )

Usage of the arguments like detectionRegExp are same as the ones in DetectableTextField.

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

`detectionRegExp()`

The widgets and methods in this package is expected to be used with RegExp.

The function detectionRegExp() returns sample regExp depending on the boolean arguments: hashtag , atSign, and url.They are all true by default.

If you see the API reference , you will see the function just returns the sample regular expressions below. You can use them directly if you want.

sample regExp	hashtag	atSign	url
`hashTagRegExp`	○	×	×
`atSignRegExp`	×	○	×
`urlRegExp`	×	×	○
`hashTagAtSignRegExp`	○	○	×
`hashTagUrlRegExp`	○	×	○
`AtSignUrlRegExp`	×	○	○
`hashTagAtSignUrlRegExp`	○	○	○

The detection rules are almost same as X(formally twitter).
1. It needs space before # or @.
2. It stops # and @ detection if there's emoji or symbol.

The examples currently support six languages: English, Japanese, Korean, Spanish, Arabic, and Thai.

Customize with useful functions

Check if there are detections

  print(isDetected("Hello #World", hashTagRegExp));
// true

  print(isDetected("Hello World", hashTagRegExp));
// false

Extract detections from text


  final List<String> detections = extractDetections(
    "#Hello World #Flutter Dart #Thank you", 
    hashTagRegExp,
  );
  // ["#Hello", "#Flutter", "#Thank"]

If you have any requests or questions, please feel free to ask on github.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Santa Takahashi} 💻	_{Paresh Patil} 💻	_{Joseph Muller} 💻	_{Esteve Aguilera} 💻	_MATTYGILO 💻	_{Abdullahi A. Addow} 💻	_{Social Jawn} 💻
_xuxiaowei13 💻	_debuggerx01 💻	_{furukaze-akane} 💻	_drown0315 💻