๐ 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.