mentionable_text_field

A flutter plugin to create customizable text field that has a mentionable feature.

Installing:

In your pubspec.yaml

dependencies:
  mentionable_text_field: ^0.0.2

import 'package:mentionable_text_field/mentionable_text_field.dart';


Basic Usage:

    class _MyHomePageState extends State<MyHomePage> {
  List<Mentionable> _mentionableUsers = [];
  late void Function(Mentionable mentionable) _onSelectMention;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Stack(
          children: [
            Positioned(
              bottom: 0,
              width: MediaQuery.of(context).size.width,
              height: 200,
              child: Column(
                children: [
                  MentionableTextField(
                    onControllerReady: (value) =>
                    _onSelectMention = value.pickMentionable,
                    maxLines: 1,
                    onSubmitted: print,
                    mentionables: const [
                      MyUser('John Doe'),
                      MyUser('Jeanne Aulas'),
                      MyUser('Alexandre Dumas')
                    ],
                    onMentionablesChanged: (mentionableUsers) =>
                        setState(() => _mentionableUsers = mentionableUsers),
                    decoration:
                    const InputDecoration(hintText: 'Type something ...'),
                  ),
                  Expanded(
                    child: ListView.builder(
                      itemBuilder: (context, index) {
                        final mentionable = _mentionableUsers[index];
                        return ListTile(
                          leading: const Icon(Icons.person),
                          title: Text(mentionable.label),
                          onTap: () => _onSelectMention(mentionable),
                        );
                      },
                      itemCount: _mentionableUsers.length,
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}


Custom usage

In addition to basic textField's attributes, There are other options:\

Properties Description
ValueChanged<MentionTextEditingController>? onControllerReady A callback to retrieve the TextField controller when ready
List<Mentionable> mentionables List of possible Mentionable objects, eg: users.
String escapingMentionCharacter The character used to replace mention. It should not be used by the user to avoid issues. It should be a single character.
MentionablesChangedCallback onMentionablesChanged Callback that is called on each new characters typed in TextField. It gives the current candidates to mention feature.
TextStyle mentionStyle Text Style applied to mentions

Additional information

Don't hesitate to suggest any features or fix that will improve the package!

Libraries

mentionable_text_field