π Flutter Mentions
A simple flutter input widget to add @
mentions functionality to your app
Install π¦
To use this package, add flutter_mentions
as a dependency in your pubspec.yaml file.
You will need to add flutter_mentions
to your pubspec.yaml
:
dependencies: flutter: sdk: flutter flutter_mentions:
Then, run flutter packages get
in your terminal.
Usage π»
To use this package you must first wrap your top most widget with Portal
as this package uses flutter_portal
to show the suggestions list.
[Portal], is the equivalent of [Overlay].
This widget will need to be inserted above the widget that needs to render under your overlays.
If you want to display your overlays on the top of everything, a good place to insert that [Portal] is above MaterialApp
:
Portal( child: MaterialApp( ... ) );
(works for CupertinoApp
too)
This way [Portal] will render above everything. But you could place it somewhere else to change the clip behavior.
Widgets:
FlutterMention
mentions: List<Mention>
β List of Mention that the user is allowed to triggered.suggestionPosition: SuggestionPosition
β Suggestion modal position, can be alligned to [Top] or [Bottom].onMentionAdd: Function(Map<String, dynamic>)
β Triggers when the suggestion was added by tapping on suggestion.suggestionListHeight: double
β Max height for the suggestion list. Defaults for 300.0.onMarkupChanged: Function(String)
β A Functioned which is triggered when ever the input changes but with the markup of the selected mentions.suggestionListDecoration: BoxDecoration
β Decoration for the Suggestion list.defaultText: String
β Populate your input field with pre-filled text.onSearchChange: Function(String trigger, String value)
β Fired only when the input changes & user is searching a mention item.leading: List<Widget>
β List of widgets that should be placed before the input.trailing: List<Widget>
β List of widgets that should be placed after the input.onSuggestionVisibleChanged: Function(bool)
β Triggers when the suggestion list visibility changed.- Supports all the other properties that
TextField
supports.
Mention
trigger: String
β A single character that will be used to trigger the suggestions.data: List<Map<String, dynamic>>
β List of Map to represent the suggestions shown to the user. You need to provide two Required propertiesid
&display
both are [String] You can also have any custom properties as you like to build custom suggestion widget (NOTE: this can later be updated to show new or filtered mention list).style: TextStyle
β Style for the mention item in Input.matchAll: bool
β Should every non-suggestion with the trigger character be matched.disableMarkup: bool
β Should the markup generation be disabled for this Mention Item.suggestionBuilder: Widget Function(Map<String, dynamic>)
β Build Custom suggestion widget using this builder.markupBuilder: String Function(String trigger, String mention, String value)
β Used to define how the mentions markup should be saved.
example, Mention instance
Mention( trigger: "#", disableMarkup: true, style: TextStyle( color: Colors.blue, ), data: [ {"id": "reactjs", "display": "reactjs"}, {"id": "javascript", "display": "javascript"}, ], matchAll: true, )
Example
FlutterMentions( key: key, suggestionPosition: SuggestionPosition.Top, maxLines: 5, minLines: 1, mentions: [ Mention( trigger: "@", style: TextStyle(color: Colors.purple), data: [ { "id": "61as61fsa", "display": "fayeedP", "photo": "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg" }, { "id": "61asasgasgsag6a", "display": "khaled", "photo": "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg", style: TextStyle(color: Colors.green), }, ], ) ], ),
You can find detailed example in example folder
Frequently asked questions
1. How do I can access to the the editing controller? A. To get the control of TextEditingController
just use a Global key more info can be found here #13. This will also allow you to access the text
& markupText
.
2. How do I search users as I type? A. Just use the onSearchChange
to get the currrent search text & make request to the server and later update the data.
3. What is the need of Portal? A. You should check this comment where I mentioned in more detail the reason behind using portal.
Credits π¨π»βπ»
- flutter_portal β Remi Rousselet
Found this project useful? β€οΈ
If you found this project useful, then please consider giving it a βοΈ on Github and sharing it with your friends via social media.
License βοΈ
API details π
See the flutter_mentions.dart for more API details
Issues and feedback π
If you have any suggestion for including a feature or if something doesnβt work, feel free to open a Github issue for us to have a discussion on it.