CodeChai
Published in

CodeChai

How to create Hyperlink for Text in Flutter

In most of the mobile application, there are links which redirect the users to some external website for further read about particular section or an article. Therefore we will need a way to accomplish this in our Flutter app.

There is no build-in widget to add a link to text in Flutter. But there are some work-round which we can use to accomplish the same goal.

Add the plugin

First, you need a url_launcher plugin if we need to redirect the user to the external website. Load the pubspec.yaml and apply that plugin

url_launcher: ^5.7.5

Run the following command to get the plugin or your project

flutter pub get

Next import the plugin where you want to use that.

import 'package:url_launcher/url_launcher.dart';

Load URL when pressing the text

Usually when we add ing a link like “read more” we will add it as a part of an existing paragraph. For that, we have to use the RichText widget which allows using TextSpan widget to separate some wording to add the unique style.

For one TextSpan you can make the text style looks like the link by adding the blue colour and you can use recogniser property to set a Gesture detector for a particular text. It will help to capture the text click in the widget. In there you can use the launch method to load the particular URL when someone Tap on the text.

RichText(
text: TextSpan(
children: [
TextSpan(
style: defaultText,
text: "To learn more "
),
TextSpan(
style: linkText,
text: "Click here",
recognizer: TapGestureRecognizer()..onTap = () async{
var url = "https://www.youtube.com/channel/UCwxiHP2Ryd-aR0SWKjYguxw?view_as=subscriber";
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
),
]
))

Turn Text URL to Clickable link using linkify

linkify Flutter plugin can turn text URL and email to a clickable inline text.

First, add flutter_linkify plugin to your project.

dependencies:
flutter_linkify: ^3.1.3

Next import to the file which you are going to implement the code.

import 'package:flutter_linkify/flutter_linkify.dart';

Now you can directly use the widget like below

Linkify(
onOpen: (link) {
print("Linkify link = ${link.url}");
},
text: "Linkify click - https://www.youtube.com/channel/UCwxiHP2Ryd-aR0SWKjYguxw",
style: TextStyle(color: Colors.blue),
linkStyle: TextStyle(color: Colors.green),
),

onOpen callback will pass the link and you can perform any action from there. In this case, I only print the link in the console, but you can use the launch method to launch the actual URL in a browser.

How to show http:// or https:// in the link text

You can enable humanize option to true to make this happen.

options: LinkifyOptions(humanize: false),

Remove www from the link

options: LinkifyOptions(removeWww: true)

Originally published at https://mightytechno.com on October 23, 2020.

--

--

--

A place for programmers and writers turning coffee/tea into code, one line at a time.

Recommended from Medium

Setup Flutter — Basic System Configuration.

Rails 6.0: Upload images using Active Storage and Google Cloud Services tutorial.

A Web-based Sudoku Recognizer using Amazon Textract

Windowless Transformation for Multivariate Time Series

The Perfect Teaching Language

Gigabyte Slot 1

Gigabyte

AWS Control Tower — a simple setup guide

Hotspotty “mobile app” Functionality, Discord Authorization, & Wallet Verification

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ishan Fernando

Ishan Fernando

Apps + Blogger

More from Medium

Flutter — Persisting data locally using sembast.

Bringing Life To Your Flutter Application

Remote Localization in Flutter

Flutter Authentication with Firebase.