Quick Tip #4 — Converting text URLs into clickable hyperlinks
We interact with APIs all the time, fetching network data is critical part of developing any app. The data returned by API however would more time than not contain various types such asString, int, bool and so on.
Ideally, once API returns with data, next step is to create model class with objects, parse them and display the data in the UI.
Types such as String and int when parsed, is displayed as-is in UI.
Consider below sample cricket news api response:
“title”: “Daryl Mitchell lbw brings DRS back in the spotlight”, “description”: “HotSpot showed a mark as the ball passed the bat, but there was no spike on Snicko and as a result the batsman was ruled lbw | ESPNcricinfo.com”,
Based on the above sample response, a sample class with objects to represent this data can be created:
class News {
String title;
String description;
String content;
}All fields are straight-forward, they are all Strings.
If we parse above api response and display it in UI using aText widget, the data will be shown like this:
As you can see the data is displayed as expected.
Now, let’s say if the sample api response also returns an url for each news item, containing an http link:
“title”: “Daryl Mitchell lbw brings DRS back in the spotlight”,“description”: “HotSpot showed a mark as the ball passed the bat, but there was no spike on Snicko and as a result the batsman was ruled lbw | ESPNcricinfo.com”,"url": "http://www.espncricinfo.com/story/_/id/25950138/daryl-mitchell-lbw-brings-drs-back-spotlight",
In our sample News class, we will declare url as a String then parse the object. The url will be displayed as regular text:
As a user, if we see Urls in apps, we expect for them to be clickable hyperlinks. In addition to this, we expect that the link once clicked, is opened and displayed in the phone’s web browser. The same is expected in our use case as well.
So how do we convert the url into a clickable hyperlink?
flutter_linkify is a plugin which helps you achieve this. It converts text URLs into clickable links. Let’s see how.
Add flutter_linkify dependency to pubspec.yaml, import the package in dart file and run flutter packages get to install the referenced package.
flutter_linkify: 1.0.3import 'package:flutter_linkify/flutter_linkify.dart';
In order to convert url into a clickable hyperlink, we just need to wrap the Text widget containing url object inside Linkify widget, as shown below:
Before implementing Linkify:
Container(
margin: EdgeInsets.all(5.0),
child: Text('${news.url}'),
),After implementing Linkify:
Container(
margin: EdgeInsets.all(5.0),
child: Linkify(
text: '${news.url}', style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
)
),Linkify widget has text property in which we passed the url object we parsed from our News class.
Running the app will now show the url as below:
The url is now displayed as an actual clickable link, but this is only half job done. We also want to open the link to display it’s contents in a browser. For that, we’ll use url_launcher plugin that helps to achieve the remaining part. This plugin launches the url in a webview.
Add url_launcher dependency in pubspec.yaml, import the package in dart file and run flutter packages get to install it.
url_launcher: ^4.0.3import 'package:url_launcher/url_launcher.dart';
flutter_linkify is well integrated with url_launcher and has a method onOpen in which we instruct Flutter to launch the url in mobile device’s browser, as below:
Container(
margin: EdgeInsets.all(5.0),
child: Linkify(
onOpen: (url) async {
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
},
text: '${news.url}', style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
)
),canLaunch method is used to check if the specified url we are passing can be handled by some app (read: browser) on the device.
launch method is used to parse the specified url string and delegates handling of it to the underlying platform. In most cases, the url is launched on the default browser on device.
Let’s see the final result on both platforms:
My other articles on Flutter are:
