Thread by @Mullr33

Interested in setting up a mentioning system in your social networking app?

Here's a short thread on how I've implemented one in #Flutter.

I've included code snippets, important packages, and some tasty tech tips. Check it --> 🧵

#appdevelopment #cs

First, you'll want to make sure that each username is formatted correctly.

For implementing "mentions" like Twitter, your usernames cannot have spaces.

This lets you tag users in posts by typing the at-sign and then the name. Examples: @NoboxApp, @ParaSightApp, @BigIdeaski

In #Flutter you can prevent spaces using the FilteringTextInputFormatter and setting the maxLines property to 1.

This maxLines setting prevents new line characters.

@carbon_app

Next, you'll need to make sure that each username is unique.

If not, you won't be able to accurately mention users and the concept of a digital #identity starts to crumble.

You can check the uniqueness by running a quick @Firebase query and checking if a document exists.

Something as simple as this should do.

I typically run this query when the user submits their changes but if you want to be ambitious, you can check the availability as they type.

Beware of over-querying. A debouncing method is smart here.

@carbon_app

Now for the fun part!

Once your users are created, you can use the detectable_text_field package to highlight strings starting with @.

This package has DetectableTextField and DetectableText widgets so you can show mentions everywhere.

pub.dev/packages/detec…

To implement the "write" side of it, create a DetectableTextField and set the detectionRegExp to one that includes AtSigns.

- hashTagAtSignUrlRegExp
- atSignRegExp
- AtSignUrlRegExp
- hashTagAtSignRegExp

The output is just what you would expect.

On the "read" side, it's just as simple.

Create a DetectableText widget with one of the above detectionRegExps.

You can add interactivity by setting the onTap property. Note that you'll need to distinguish hashtags from mentions.

@carbon_app

If you found this useful, subscribe to my #Flutter newsletter (Flutter Fast, Flutter Far) on my profile page.

I'll be sending out one letter each week on Flutter dev, feature implementation, and coding efficiency!

Thanks!