馃摏 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 properties id & 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 馃懆馃徎鈥嶐煉

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鈥檛 work, feel free to open a Github issue for us to have a discussion on it.

GitHub

View Github

Entradas similares

Deja una respuesta