Have you wanted to add links, phone numbers, email in a block of text and make them clickable using a single Widget than I have just the thing for you? Recently I found myself in the same boat so I created a Widget called flutter_parsed_text .

So, In this tutorail, we are going to explore this widget and see how simple it is to create an Inline link in Flutter.

First, lets jus create a fresh flutter project using:

flutter create flutter_parsed_text_example

Now that we have a project let’s add the dependency to your pubspec.yaml .

url_launcher: ^5.0.3

flutter_parsed_text: ^1.2.0

We are almost ready to start, Let's add ParsedText to your starter code, you can add the text in text parameter that needs to be parsed. You can set alignment by setting alignment and also set a default style for the text which does not match the regex using style parameter.

As you can see from the above example we have phone numbers, links, emails and also hashtags too. Since this library supports build-in types for email, links, and email there's no need to implement but we will have to implement custom regex for hashtag we will see that later, for now, let's start with build-in types.

ParsedText has parse parameter which takes a List<MatchText> . This MatchText the class has 4 parameters type , style , onTap , pattern let's go over them one by one:

type: Uses build-in types for “email”, “phone” and “url”.

style: Styles for the parsed text.

onTap: Fires a callback function when this MatchText is tapped on.

pattern: Custom regex to match text too.

Let’s the code example of this three build in types:

Let's also try to make hashtags clickable here’s how you do it. Just by overriding the pattern parameter, we can have a clickable hashtag like so:

Here’s the final output:

If you want a to take a look at the working example you take a look the example folder in the packages Github repository.

Thanks for reading.