A simple flutter input widget to add @ mentions functionality to your app

Overview

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

Comments
  • AnnotationEditingController crash when upgrade to flutter 2

    AnnotationEditingController crash when upgrade to flutter 2

    I can't build my app because this error : ../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_mentions-2.0.0-nullsafety/lib/src/annotation_editing_controller.dart:58:12: Error: The method 'AnnotationEditingController.buildTextSpan' has fewer named arguments than those of overridden method 'TextEditingController.buildTextSpan'. TextSpan buildTextSpan({TextStyle? style, bool? withComposing}) { ^ ../../flutter/packages/flutter/lib/src/widgets/editable_text.dart:192:12: Context: This is the overridden method ('buildTextSpan'). TextSpan buildTextSpan({required BuildContext context, TextStyle? style , required bool withComposing}) { ^ ../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_mentions-2.0.0-nullsafety/lib/src/annotation_editing_controller.dart:58:12: Error: The method 'AnnotationEditingController.buildTextSpan' doesn't have the named parameter 'context' of overridden method 'TextEditingController.buildTextSpan'. TextSpan buildTextSpan({TextStyle? style, bool? withComposing}) { ^ ../../flutter/packages/flutter/lib/src/widgets/editable_text.dart:192:12: Context: This is the overridden method ('buildTextSpan'). TextSpan buildTextSpan({required BuildContext context, TextStyle? style , required bool withComposing}) {

    opened by letungcntt 12
  • onMarkupChanged and onMentionAdd

    onMarkupChanged and onMentionAdd

    Hi! I'm processing the data (layouting it with html tags) in onMarkupChanged. But I see, that if I'm not typing anything rather than just @ mention the data in onMarkupChanged callback is wrong and contains only @. But If typed anything than all is okay.

    2020-09-29_13-39-52 2020-09-29_13-40-03 2020-09-29_13-40-46

    What I can do to enable mentions callback firing in case I'm just entering only mention?

    bug question 
    opened by JEuler 10
  • Not able to use flutter_mentions 1.0.1. Error: No named parameter with the name 'autofillHints'.

    Not able to use flutter_mentions 1.0.1. Error: No named parameter with the name 'autofillHints'.

    @fayeed , @erjanmx Screenshot 2020-10-02 at 4 09 15 PM I have added flutter_mentions as a dependency to my pub spec file like:

    dependencies: flutter: sdk: flutter flutter_mentions: ^1.0.1

    Also followed instructions like wrapping MaterialApp under Portal like:

    return Portal( child: MaterialApp( .... ) );

    While running the app I am getting below compile time error:

    Compiler message: ../../SourceCode/FlutterSetup/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_mentions-1.0.1/lib/src/mention_view.dart:425:17: Error: No named parameter with the name 'autofillHints'. autofillHints: widget.autofillHints, ^^^^^^^^^^^^^ ../../SourceCode/FlutterSetup/flutter/packages/flutter/lib/src/material/text_field.dart:304:9: Context: Found this candidate, but the arguments don't match. const TextField({ ^^^^^^^^^

    Also tried to download example app provided here at https://github.com/fayeed/flutter_mentions but it's also not running & throwing same compile time error mentioned able.

    wontfix 
    opened by nirajjoshi 7
  • Unable to pre-fill field with formatted mentions

    Unable to pre-fill field with formatted mentions

    Hello, thanks for the library!

    When using defaultText, the field does not show the formatted mention(s) as expected but the markup text. I've assured that my mention's data has the user previously mentioned.

    I've tried with a custommarkupBuilder and the default one.

    Here you can see the defaultText not formatted, but that if I add a new mention it works as expected:

    https://user-images.githubusercontent.com/4428953/112364675-29982600-8cad-11eb-8507-465f02c7dd25.mp4

    Thanks

    opened by robinwkurtz 6
  • When typed full display name after @ No results appear for user mentions.

    When typed full display name after @ No results appear for user mentions.

    Normally it is working fine. Like right after typing initial letters from display name after @ it starts showing mention results to select. On tapping on mention suggestions it is added to textfield with highlighted color as well.

    However there is some issue when we type full display name after @. Like if the display name is John then till typing @Joh it shows mention result suggestions. Right after we type @John suggestions disappear & there is no way to tag (mention) that user. Please refer screenshots for more reference. They are right from the sample app.

    IMG_6495 IMG_6496 IMG_6497

    Please do the needful.

    opened by nirajjoshi 6
  • Crashes when we use Special characters in display name

    Crashes when we use Special characters in display name

    @fayeed Tried to use Example application itself with display name ~|[]{}#%^*+=_|<>$£€•.,?!.

    App throws exception like: Nothing to repeat(@~|[]{}#%^*+=|<>$£€•.,?!|@khaled|@markT|@JhonL|#([A-Za-z0-9])*|#reactjs|#javascript)_

    Please refer screenshots for more reference:

    Screenshot 2020-10-12 at 1 08 32 PM Screenshot 2020-10-12 at 12 48 09 PM Screenshot 2020-10-12 at 12 48 53 PM
    opened by nirajjoshi 6
  • Cursor moves to first position after adding a space after a mention call

    Cursor moves to first position after adding a space after a mention call

    Hello , The error is whenever I click a space after mentioning a name like @abc the cursor moves automatically to first position that is to the starting of text field. Please reply with a solution.

    opened by sarthak290 5
  • Suggestion not being added on tapping

    Suggestion not being added on tapping

    I am trying the example shared in Readme.md. When I tap on a suggestion, nothing happens. It is not added to the text. Is it a bug or am I missing something ?

    opened by amr1tv1rd1 4
  • Cursor position always show at the start when add new mentions into textfield

    Cursor position always show at the start when add new mentions into textfield

    Hi, your package is awesome. Android works perfectly but in IOS, it doesn't work as expected

    https://user-images.githubusercontent.com/34902237/106765508-72e3d600-666b-11eb-8059-baa0ea28b0d7.mov

    opened by Barry0501 3
  • Support for flutter v2.2.0

    Support for flutter v2.2.0

    Hi, After upgrading the flutter version to 2.2.0, I got the below error.

    ../../Software/FlutterSdk/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_mentions-2.0.0-nullsafety/lib/src/annotation_editing_controller.dart:58:12: Error: The method 'AnnotationEditingController.buildTextSpan' has fewer named arguments than those of overridden method 'TextEditingController.buildTextSpan'. TextSpan buildTextSpan({TextStyle? style, bool? withComposing}) {
    ^
    ../../Software/FlutterSdk/flutter/packages/flutter/lib/src/widgets/editable_text.dart:192:12: Context: This is the overridden method ('buildTextSpan'). TextSpan buildTextSpan({required BuildContext context, TextStyle? style , required bool withComposing}) { ^
    ../../Software/FlutterSdk/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_mentions-2.0.0-nullsafety/lib/src/annotation_editing_controller.dart:58:12: Error: The method 'AnnotationEditingController.buildTextSpan' doesn't have the named parameter 'context' of overridden method 'TextEditingController.buildTextSpan'. TextSpan buildTextSpan({TextStyle? style, bool? withComposing}) {
    ^
    ../../Software/FlutterSdk/flutter/packages/flutter/lib/src/widgets/editable_text.dart:192:12: Context: This is the overridden method ('buildTextSpan'). TextSpan buildTextSpan({required BuildContext context, TextStyle? style , required bool withComposing}) { ^

    FAILURE: Build failed with an exception.

    After checking the source code 'Context' param added additionaly.

    `/// Builds [TextSpan] from current editing value.
      ///
      /// By default makes text in composing range appear as underlined. Descendants
      /// can override this method to customize appearance of text.
      TextSpan buildTextSpan({required BuildContext context, TextStyle? style , required bool withComposing}) {
        assert(!value.composing.isValid || !withComposing || value.isComposingRangeValid);
        // If the composing range is out of range for the current text, ignore it to
        // preserve the tree integrity, otherwise in release mode a RangeError will
        // be thrown and this EditableText will be built with a broken subtree.
        if (!value.isComposingRangeValid || !withComposing) {
          return TextSpan(style: style, text: text);
        }
        final TextStyle composingStyle = style!.merge(
          const TextStyle(decoration: TextDecoration.underline),
        );
        return TextSpan(
          style: style,
          children: <TextSpan>[
            TextSpan(text: value.composing.textBefore(value.text)),
            TextSpan(
              style: composingStyle,
              text: value.composing.textInside(value.text),
            ),
            TextSpan(text: value.composing.textAfter(value.text)),
          ],
        );
      }`
    
    
    opened by chainchelliah 2
  • Logs display

    Logs display

    Hi,

    For some reason I have some logs displayed in the console but can't find any print my code.

    
    flutter: (@\(\[A-Za-z0-9\]\)\*|%\(\[A-Za-z0-9\]\)\*|&\(\[A-Za-z0-9\]\)\*|&paulj|&simon|&timcruise|&seven)
    flutter: (@\(\[A-Za-z0-9\]\)\*|%\(\[A-Za-z0-9\]\)\*|&\(\[A-Za-z0-9\]\)\*|&paulj|&simon|&timcruise|&seven)
    flutter: (@\(\[A-Za-z0-9\]\)\*|%\(\[A-Za-z0-9\]\)\*|&\(\[A-Za-z0-9\]\)\*|&paulj|&simon|&timcruise|&seven)
    flutter: (@\(\[A-Za-z0-9\]\)\*|%\(\[A-Za-z0-9\]\)\*|&\(\[A-Za-z0-9\]\)\*|&paulj|&simon|&timcruise|&seven)
    flutter: (@\(\[A-Za-z0-9\]\)\*|%\(\[A-Za-z0-9\]\)\*|&\(\[A-Za-z0-9\]\)\*|&paulj|&simon|&timcruise|&seven)
    flutter: (@\(\[A-Za-z0-9\]\)\*|%\(\[A-Za-z0-9\]\)\*|&\(\[A-Za-z0-9\]\)\*|&paulj|&simon|&timcruise|&seven)
    

    Any idea how to locate these logs or hide them ? I have tried to look for print( but can't find anything

    cc @fayeed

    opened by loic-hamdi 2
  • Remove user once selected?

    Remove user once selected?

    Is there a way to remove/hide an item after selecting it from the list? (and put it back if the item was erased from the textField)

    Updating the list data doesn't seem to reload the initialized list.

    opened by KKTadena 0
  • Can't adjust width size

    Can't adjust width size

    Is there a way to limit the width size of the suggestions? (Like setting a width size or matching content width) suggestionBuilder seems to be matching the screen width, adding a sizedbox/container width doesn't work.

    goal: is to have a pop-up like suggestion box, instead of a full width suggestions

    opened by KKTadena 0
Releases(0.1.1)
Owner
Fayeed Pawaskar
Creator of ChartNerd | Flutter | React Native | ReactJs
Fayeed Pawaskar
A web dashboard that allows you to monitor your Chia farm and sends notifications when blocks are found and new plots are completed through a discord bot. It can link multiple farmers/harvesters to your account.

farmr A web dashboard that allows you to monitor your Chia farm and sends notifications when blocks are found and new plots are completed through a di

Gil Nobrega 261 Nov 10, 2022
A Flutter package that makes it easy to customize and work with your Flutter desktop app window.

bitsdojo_window A Flutter package that makes it easy to customize and work with your Flutter desktop app window on Windows, macOS and Linux. Watch the

Bits Dojo 607 Jan 4, 2023
A Flutter package that makes it easy to customize and work with your Flutter desktop app's system tray.

system_tray A Flutter package that that enables support for system tray menu for desktop flutter apps. on Windows, macOS and Linux. Features: - Modify

AnTler 140 Dec 30, 2022
A material theme editor and generator for Flutter to configure and preview the overall visual theme of your material app

A material theme editor and generator for Flutter to configure and preview the overall visual theme of your material app

Joshua 301 Jan 3, 2023
An app to monitor linux PC stats directly from your phone.

L I N U X M O N An app to monitor linux PC stats such as CPU, Battery, RAM etc. on your phone. Installation Install the server on your PC LINUX Downlo

Ayush Singh 20 Dec 21, 2022
The Chicago widget set for Flutter

Chicago widget library The Chicago widget set is a retro 32-bit desktop design language for Flutter. It was discussed in the Building a desktop design

Todd Volkert 405 Dec 30, 2022
A Flutter Web Plugin to display Text Widget as Html for SEO purpose

SEO Renderer A flutter plugin (under development) to render text widgets as html elements for SEO purpose. Created specifically for issue https://gith

Sahdeep Singh 103 Nov 21, 2022
Build installers for your Flutter applications with Squirrel

squirrel A new Flutter package project. Getting Started This project is a starting point for a Dart package, a library module containing code that can

Ani Betts 44 Dec 28, 2022
A flutter application to monitor your Linux PC statistic.

Linux Stats App A flutter application to monitor your Linux PC statistic. Screenshots Installation Download or clone the repository: $ git clone https

Malte2036 7 Dec 17, 2022
A tool for debugging your Flutter apps.

anyinspect_app A tool for debugging your Flutter apps. Platform Support Linux macOS Windows ➖ ✔️ ➖ Installation Downloads are available on the Release

AnyInspect 40 Nov 11, 2022
A universal clipboard for all your devices.

?? ClipIo A Universal clipboard for all your devices! It's often difficult to move some data from one device to another especially when we have to mov

Krishnendu Bera 14 Sep 30, 2021
A simple app design

shopper_design A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

Samuel Adekunle 2 Nov 25, 2021
A simple, modern AppImageHub Client, powered by flutter.

AppImagePool Simple AppImageHub Client Main Features FLOSS and non profit app Simple categories Download from github directly, no extra-server involve

Prateek SU 488 Dec 30, 2022
Simple file explorer for desktop made with Flutter, highly inspired by macOS Finder

file_explorer A basic file explorer made with Flutter Getting Started This project is a starting point for a Flutter application. A few resources to g

Valentin 0 Nov 7, 2021
A simple-to-use flutter update package for Windows, MacOS, and Linux.

Updat - The simple-to-use, flutter-based desktop update package Updat is a simple-to-use reliable flutter-native updater that handles your application

Eduardo M. 14 Dec 21, 2022
Fluttern is a web app made with Flutter to list Flutter internships/jobs for the community.

Fluttern Fluttern is a web app made with Flutter to list Flutter internships/jobs for the community. It uses Google Sheet as a backend, simplifying th

Aditya Thakur 3 Jan 5, 2022
Biyi (比译) is a convenient translation and dictionary app written in dart / Flutter.

biyi_app Biyi is a convenient translation and dictionary app written in dart / Flutter. View document "Biyi" (比译) is the Chinese word for "Comparison

biyidev 894 Jan 1, 2023
A platform adaptive Flutter app for desktop, mobile and web.

Flutter Folio A demo app showcasing how Flutter can deliver a great multi-platform experience, targeting iOS, Android, MacOS, Windows, Linux, and web.

gskinner team 3.5k Jan 2, 2023
A tutorial for creating an Ubuntu Linux Flutter app, using the yaru theme

Building a Yaru app with Flutter Summary URL https://github.com/ubuntu/user_manager Category Environment Linux Status Feedback Link Author Frederik Fe

Ubuntu 22 Dec 21, 2022