In Web, Hyperlink takes us to a web page or any other section of the same webpage. Sometimes, we need to implement hyperlinks in our app. For further reading more content or showing your website or Facebook page.
In this post, you will learn how to create hyperlinks in Flutter.
We already discussed about Clickable Text in Flutter. Recommended to read that first, if you didn’t.
Contents
1. HyperLink using Link widget And Url_launcher
In Flutter 2.0, We got a new Widget – Link Widget. Using url_launcher package and Link widget, you can easily navigate to a web page and also launch different screens in your app.
Before Using the Link widget, you must add url_launcher dependency in pubspec.yaml file.
url_launcher: ^6.0.8
If you are targeting Android Devices which has an API level of 30 and above. Just add this in android/app/src/main/AndroidManifest.xml.
<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES"/>
<queries>
<!-- If your app opens https URLs -->
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="https" />
</intent>
<!-- If your app makes calls -->
<intent>
<action android:name="android.intent.action.DIAL" />
<data android:scheme="tel" />
</intent>
<!-- If your app emails -->
<intent>
<action android:name="android.intent.action.SEND" />
<data android:mimeType="*/*" />
</intent>
</queries>
iOS
Add below code in iOS/Runner/info.plist file.
<key>LSApplicationQueriesSchemes</key> <array> <string>https</string> <string>http</string> </array>
- In this example, There are 2 Link widgets. One for launching webpage and other for navigating to a new screen.
- uri property: specify webpage URL or route.
- builder : Using this property, you can build the link.
- target property: By default, it uses LinkTarget.defaultTarget
- Android: opens the link in the browser or any other related app.
- iOS: opens the link in the webview for web urls.
- web: Opens in the same tab where Flutter app is running.
- uri: Uri.parse(‘/second’) – Flutter checks for routes property defined in MaterialApp and navigate to SecondScreen.
target: LinkTarget.self
- You can also use self, blank
- self: On iOS and Android, opens link in the webview inside the app. Web uses the same tab.
Link(
uri: Uri.parse('https://androidride.com'),
//target: LinkTarget.self,
builder: (context, followLink) {
return RichText(
text: TextSpan(children: [
TextSpan(
text: 'Click here: ',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
TextSpan(
text: 'AndroidRide',
style: TextStyle(
color: Colors.blue,
decoration: TextDecoration.underline,
fontWeight: FontWeight.bold,
fontSize: 21,
),
recognizer: TapGestureRecognizer()
..onTap = followLink,
),
]),
);
}),
),
SizedBox(
height: 20,
),
Link(
uri: Uri.parse('/second'),
builder: (context, followLink) {
return InkWell(
onTap: followLink,
child: Text(
'Go to Second Screen',
style: TextStyle(
fontSize: 20,
color: Colors.blue,
decoration: TextDecoration.underline,
),
),
);
},
),
complete source code is given below.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/link.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Hyperlink Text Example',
routes: {
'/': (context) => FirstScreen(),
'/second': (context) => SecondScreen()
},
);
}
}
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Hyperlink Text Using Link Widget'),
),
body: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Link(
uri: Uri.parse('https://androidride.com'),
//target: LinkTarget.self,
builder: (context, followLink) {
return RichText(
text: TextSpan(children: [
TextSpan(
text: 'Click here: ',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
TextSpan(
text: 'AndroidRide',
style: TextStyle(
color: Colors.blue,
decoration: TextDecoration.underline,
fontWeight: FontWeight.bold,
fontSize: 21,
),
recognizer: TapGestureRecognizer()
..onTap = followLink,
),
]),
);
}),
),
SizedBox(
height: 20,
),
Link(
//when taps the link, moves to second screen.
uri: Uri.parse('/second'),
builder: (context, followLink) {
return InkWell(
onTap: followLink,
child: Text(
'Go to Second Screen',
style: TextStyle(
fontSize: 20,
color: Colors.blue,
decoration: TextDecoration.underline,
),
),
);
},
),
],
),
),
);
}
}
class SecondScreen extends StatelessWidget {
const SecondScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
//poping the current screen from the stack, Shows First Screen.
Navigator.pop(context);
},
child: Text('Go Back To First Screen'),
),
),
);
}
}
2. Flutter Hyperlink Text Using RichText And url_launcher
This method also uses Url_launcher package.
url_launcher: ^6.0.8
- Android 10 and above, import below code in android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES"/>
<queries>
<!-- If your app opens https URLs -->
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="https" />
</intent>
<!-- If your app makes calls -->
<intent>
<action android:name="android.intent.action.DIAL" />
<data android:scheme="tel" />
</intent>
<!-- If your app emails -->
<intent>
<action android:name="android.intent.action.SEND" />
<data android:mimeType="*/*" />
</intent>
</queries>
- iOS – url_launcher
Add below code in iOS/Runner/info.plist file.
<key>LSApplicationQueriesSchemes</key> <array> <string>https</string> <string>http</string> </array>
- Using RichText, we can make the hyperlink text.
- Using TapGestureRecognizer‘s onTap method, we can make it clickable.
- Using URL launcher’s launch() method, we can open the urls.
RichText(
text: TextSpan(
text: "Hyperlink Example Using RichText & url_launcher",
style: TextStyle(
color: Colors.blue,
decoration: TextDecoration.underline,
fontSize: 16,
),
recognizer: TapGestureRecognizer()
..onTap = () async {
var url = 'https://androidride.com';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}),
),
Complete source code is given below.
- if canLaunch(URL) method is true, it launches the url.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Hyperlink text example 2'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.topCenter,
child: RichText(
text: TextSpan(
text: "Hyperlink Example Using RichText & url_launcher",
style: TextStyle(
color: Colors.blue,
decoration: TextDecoration.underline,
fontSize: 16,
),
recognizer: TapGestureRecognizer()
..onTap = () async {
var url = 'https://androidride.com';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}),
),
),
),
),
);
}
}
3. Flutter HyperLink Using flutter_linkify
In this example, we will use flutter_linkify package. It turns our text URLs and email address into clickable inline links in texts.
again we use url_launcher package.
url_launcher: ^6.0.8
If you are targeting Android Devices which has an API level of 30 and above. Just add this in android/app/src/main/AndroidManifest.xml.
<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES"/>
<queries>
<!-- If your app opens https URLs -->
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="https" />
</intent>
<!-- If your app makes calls -->
<intent>
<action android:name="android.intent.action.DIAL" />
<data android:scheme="tel" />
</intent>
<!-- If your app emails -->
<intent>
<action android:name="android.intent.action.SEND" />
<data android:mimeType="*/*" />
</intent>
</queries>
iOS
Add below code in iOS/Runner/info.plist file.
<key>LSApplicationQueriesSchemes</key> <array> <string>https</string> <string>http</string> </array>
- Here Linkify widget makes https://androidride.com as link in text.
Linkify(
onOpen: (link) async {
if (await canLaunch(link.url)) {
await launch(link.url);
} else {
throw 'Could not launch $link';
}
},
text: 'Click the link: https://androidride.com',
),
Complete source code is given below.
import 'package:flutter/material.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Hyperlink Using Flutter_linkify'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Linkify(
onOpen: (link) async {
if (await canLaunch(link.url)) {
await launch(link.url);
} else {
throw 'Could not launch $link';
}
},
text: 'Click the link: https://androidride.com',
),
),
),
);
}
}
If you like this post, please share it with your family and friends.
