Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/santa112358/detectable_text_field
- Owner: santa112358
- License: mit
- Created: 2020-12-09T19:28:58.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-27T07:43:42.000Z (6 months ago)
- Last Synced: 2024-07-05T06:20:30.988Z (5 months ago)
- Topics: textfield, twitter
- Language: Dart
- Homepage: https://pub.dev/packages/detectable_text_field
- Size: 432 KB
- Stars: 40
- Watchers: 1
- Forks: 38
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - detectable_text_field
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)
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));
// trueprint(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
💻
Paresh Patil
💻
Joseph Muller
💻
Esteve Aguilera
💻
MATTYGILO
💻
Abdullahi A. Addow
💻
Social Jawn
💻
xuxiaowei13
💻
debuggerx01
💻
furukaze-akane
💻
drown0315
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors)
specification. Contributions of any kind welcome!