Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/santa112358/detectable_text_field

TextField and Text widget with detection features. You can detect hashtags, at sign, or anything you want.
https://github.com/santa112358/detectable_text_field

textfield twitter

Last synced: about 1 month ago
JSON representation

TextField and Text widget with detection features. You can detect hashtags, at sign, or anything you want.

Awesome Lists containing this project

README

        

# detectable_text_field

[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)

[![pub package](https://img.shields.io/pub/v/detectable_text_field.svg)](https://pub.dev/packages/detectable_text_field) License: MIT

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](https://pub.dev/packages/hashtagable).

![final](https://user-images.githubusercontent.com/43510799/104180838-2385fd80-5451-11eb-8506-1640b4ea829f.gif)

## Usage

### DetectableTextField

```dart
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.

```dart

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: [
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`.

```dart
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](https://pub.dev/documentation/detectable_text_field/latest/detector_sample_regular_expressions/detectionRegExp.html)
, 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

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

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

```

- Extract detections from text

```dart

final List 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](https://github.com/santa112358/detectable_text_field/issues).

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):



Santa Takahashi
Santa Takahashi

💻
Paresh Patil
Paresh Patil

💻
Joseph Muller
Joseph Muller

💻
Esteve Aguilera
Esteve Aguilera

💻
MATTYGILO
MATTYGILO

💻
Abdullahi A. Addow
Abdullahi A. Addow

💻
Social Jawn
Social Jawn

💻


xuxiaowei13
xuxiaowei13

💻
debuggerx01
debuggerx01

💻
furukaze-akane
furukaze-akane

💻
drown0315
drown0315

💻

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors)
specification. Contributions of any kind welcome!