Links in Flutter Text
Ever struggled to add links in your flutter app? I was building my chat app and I always wondered how can I send a link or my phone number in the chat which the other user can directly click and call me. Why don’t Text and RichText widgets have this basic feature?
I ended up building my own package for this…😎
I call it a Linkable widget. So, Linkable is a Flutter widget to add links to your text. By default, the Text or RichText widgets render the URLs in them as simple text which are not clickable. So, Linkable widget is a wrapper over RichText which allows you to render links that can be clicked to redirect to the URL. That means that a Linkable widget supports all the attributes of a RichText widget. Plus Links!
Currently linkable supports the following types:
- Web URL (ex: https://www.github.com/anupkumarpanwar)
- Emails (ex: 1anuppanwar@gmail.com)
- Phone numbers (ex: +918968894728)
The library takes the text and sends it to the 3 parsers (HttpParser, EmailParser, TelParser). Each parser uses a Regular expression corresponding to it and returns all the matching substrings. On a high level, these substrings are wrapped into a TextSpan with a TapGestureRecognizer attached to it.
Based on the type of link a URL scheme is prefixed to it.
- Weblinks -
http:// - Emails -
mailto: - Mobile Numbers -
tel:
And that’s how I solved my problem.
Install
To install the package, add the following dependency to your pubspec.yaml
dependencies:
linkable: ^1.0.4
url_launcher: ^5.4.10Usage
A very basic example of Linkable widget would look like this.
import 'package:linkable/linkable.dart';Linkable(
text:
"Hi!\nI'm Anup.\n\nYou can email me at 1anuppanwar@gmail.com.\nOr just whatsapp me @ +91-8968894728.\n\nFor more info visit: \ngithub.com/anupkumarpanwar \nor\nhttps://www.linkedin.com/in/anupkumarpanwar/",
);
And of course, you can use all the attributes of a RichText.
You can find a working example here.
Screenshot
