A flutter package which lets you use styled @mentions and #hashtags with twitter-like suggestions in your TextField.
This was very much inspired by flutter_parsed_text and flutter_mentions, so credit to them!
Table of contents
Installing
1. Depend on it
Add this to your package's pubspec.yaml
file:
dependencies:
flutter_parsed_text_field: ^0.1.0
2. Install it
You can install packages from the command line:
with pub
:
$ pub get
with Flutter
:
$ flutter pub get
3. Import it
Now in your Dart
code, you can use:
import 'package:flutter_parsed_text_field/flutter_parsed_text_field.dart';
Usage
FlutterParsedTextField
is a Stateful Widget that extends TextField.
FlutterParsedTextField(
controller: controller.flutterParsedTextEditingController,
suggestionMatches: suggestionMatches,
disableSuggestionOverlay: disableSuggestionOverlay,
suggestionLimit: suggestionLimit,
suggestionPosition: suggestionPosition,
matchers: [],
)
Configurable properties:
controller
– extension ofTextEditingController
which styles your parsed text fielddisableSuggestionOverlay
–true
if you don't want the built-in suggestion list to appear;false
otherwise.suggestionLimit
– number of suggestions to returnsuggestionPosition
– should the suggestion list appear above or below the text fieldmatchers
- a list ofMatcher
which defines the triggers and suggestions
Callbacks:
suggestionMatches
– returns a list of the suggestions that are matched
Matcher
Matcher<String>(
trigger: "#",
suggestions: ['BattleOfNewYork', 'InfinityGauntlet'],
idProp: (hashtag) => hashtag,
displayProp: (hashtag) => hashtag,
style: const TextStyle(color: Colors.blue),
stringify: (trigger, hashtag) => hashtag,
alwaysHighlight: true,
parse: (hashtagString) => hashtagString.substring(1),
)
Configurable properties:
trigger
- single character to trigger suggestionssuggestions
- list of suggestionsidProp
- get the id of the suggestiondisplayProp
- get the display of the suggestionstyle
- TextStyle for matchesstringify
- convert the suggestion into a parsable stringalwaysHighlight
- always apply style even if there isn't a matching suggestionparse
- convert the parsable string into a suggestion
Custom Suggestion List
If you dont want the built-in popup to appear, and instead display the suggestions elsewhere, you can! Check /example/lib/custom-suggestion-list.dart
Contributing
Pull requests are welcome. Please open an issue first to discuss what you would like to change.