mention_tag_text_field 0.0.6

A Flutter package which adds the mention or tag capabilities to existing TextField or TextFormField widget in Flutter.

This package extends the capabilties of a normal TextField or TextFormField to enable mention or tagging.

Getting started

In your pubspec.yaml

dependencies:
  mentionable_text_field: ^latest

Import the package using

import 'package:mention_tag_text_field/mention_tag_text_field.dart';

Usage

Define a MentionTagTextEditingController

final MentionTagTextEditingController _controller =
      MentionTagTextEditingController();

You can use MentionTagTextField just like your normal TextField. If you are using Form widget you can use MentionTagTextFormField.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              if (mentionValue != null)
                suggestions() // Widget to show search results
              else
                const Expanded(child: SizedBox()),
              const SizedBox(
                height: 16,
              ),
              MentionTagTextField(
                controller: _controller,

                // onMention will return text when mention is triggered,
                // otherwise it'll return null.
                onMention: (value) async {
                  mentionValue = value;
                  setState(() {});
                  await getUsersFromNetwork(); // Write your logic to get search results.
                },
                mentionTagDecoration: MentionTagDecoration(
                    // Define list of symbols where mention will be triggered.
                    mentionStart: ['@', '#'],

                    // The character which will be inserted automatically after the mention.
                    mentionBreak: ' ',

                    // Enable removing mention decrementally instead of all at once.
                    allowDecrement: true,

                    // Prevent mention triggering if mention symbol is embedded in the text.
                    allowEmbedding: false,

                    // If mention symbol is visible or not with mentions in the textfield.
                    showMentionStartSymbol: false,

                    // Max words a mention can have, must be greater than 0 or null.
                    // Null means any number of words.
                    maxWords: null,

                    // TextStyle for mentions
                    mentionTextStyle: TextStyle(
                        color: Colors.blue,
                        backgroundColor: Colors.blue.shade50)),
                decoration: InputDecoration(
                    hintText: 'Write something...',
                    hintStyle: TextStyle(color: Colors.grey.shade400),
                    filled: true,
                    fillColor: Colors.grey.shade100,
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10.0),
                        borderSide: BorderSide.none),
                    focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10.0),
                        borderSide: BorderSide.none),
                    contentPadding: const EdgeInsets.symmetric(
                        horizontal: 16.0, vertical: 12.0)),
              )
            ],
          ),
        ),
      ),
    );
  }

Initial Mentions

You can also set the initial mentions if your initial text has mentions in it. First set the initial text,

@override
  void initState() {
    super.initState();
    _controller.setText = "Hello @Emily Johnson ";
  }

Now set the intial mentions using initialMentions property. You must pass a list of tuples containing mention label and data associated with it. The mention label must have a mandatory mention start symbol for intial mentions.

You can also give a specific styling widget or pass null to use default mention styling which you set in mentionTagDecoration.

MentionTagTextField(
      controller: _controller,
      initialMentions: const [
        ('@Emily Johnson', User(id: 1, name: 'Emily Johnson'), null)
      ],
      ...
)

Adding Mentions

You can add mentions using _controller.addMention which takes a mention label and optional data associated with it.

 _controller.addMention(label: 'Emily Johnson', data: User(id: 0, name: 'Emily Johnson'));

To give a mention or tag a specific styling, you can pass your own custom widget in stylingWidget parameter of _controller.addMention. This enables you to create a variaty of styles for your mentions or tags.

_controller.addMention(label: 'Emma Miller', data: User(id: 1, name: 'Emma Miller'), stylingWidget: MyCustomTag(
   ... 
   ));

Removing Mentions Manually

By default, mentions or tags are automatically removed on backspaces.

If you want to remove a mention or tag on some action like button inside a custom tag or an external remove button, you need to call _controller.remove and give it the index of mention or tag which it has in _controller.mentions.

 _controller.remove(index: 1);

This will remove the mention or tag from both _controller and TextField.

Note: _controller.mentions is a getter removing mentions from it won't remove mentions from TextField, so you must have to call _controller.remove

Getting All Mentions

Finally, you can get all the mentions data using _controller.mentions which returns the list of data passed to each mention. If no data was passed, list of mention labels will be returned.

final List mentions = _controller.mentions;

To get the text with mention labels in it, use

final String textWithMentions = _controller.getText;

Additional information

• Contributing: Contributions are welcome! Feel free to open issues or submit pull requests on GitHub.
• Support & Feedback: You can expect prompt responses and support from the package maintainers.