As we all know Hyperlink is a technique in computer programming used to connect a specific text to a link of Web based URL. Hyperlink is most commonly used in HTML or you can say websites. But sometimes in mobile applications where developer wants to display some kind of terms conditions or a License of product he’ll be using Hyperlinking technique. In flutter we use url_launcher package to implement hyperlinking. This package allow us to navigate from flutter app to default web browser of phone on click event. So in this tutorial we would learn about Create Clickable Hyperlink Text in Flutter Android iOS Example.
Contents in this project Create Clickable Hyperlink Text in Flutter Android iOS Example:
1. Before starting the app coding we have to install the url_launcher package in our flutter project. So open your flutter project root directory and open pubspec.yaml file in any code editor. I’m using Visual Studio Code editor.
|
1 2 |
dependencies: url_launcher: ^5.7.10 |
Source code of my pubspec.yaml file after adding above package:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
name: myapp description: A new Flutter project. publish_to: 'none' version: 1.0.0+1 environment: sdk: ">=2.7.0 <3.0.0" dependencies: url_launcher: ^5.7.10 flutter: sdk: flutter cupertino_icons: ^1.0.0 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true |
3. Now save the file and open your flutter project Root directory in Command prompt or Terminal and execute below command to save and download the url_launcher package.
|
1 |
flutter pub get |
4. Now open your project’s main.dart file and import material.dart, url_launcher.dart and gestures.dart package in your project.
|
1 2 3 |
import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; import 'package:flutter/gestures.dart'; |
5. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
6. Creating our main MyApp class extend state less widget. This is our main Root parent class. In this class we are calling our ClickWidget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Example of Clickable Text in Flutter"), ), body: SafeArea( child: Center( child: ClickWidget(), ))), ); } } |
7. Creating our second class named as ClickWidget extends StatefulWidget. In this class we would make the createState() method and enable mutable state tree in given class ClickWidgetState.
|
1 2 3 4 |
class ClickWidget extends StatefulWidget { @override ClickWidgetState createState() => ClickWidgetState(); } |
8. Creating our main child class named as ClickWidgetState extends State.
|
1 2 3 4 5 |
class ClickWidgetState extends State<ClickWidget> { } |
9. Creating Widget Build Area in ClickWidgetState class -> Center widget -> Rich Text widget -> Text Span widget and creating Clickable Hyperlink Text in Flutter.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
Widget build(BuildContext context) { return Center( child: RichText( textAlign: TextAlign.center, text: TextSpan(children: [ TextSpan( text: "To Learn More About Flutter ", style: TextStyle(fontSize: 20, color: Colors.black), ), TextSpan( text: "Click Here", style: TextStyle( fontSize: 20, color: Colors.blue, decoration: TextDecoration.underline, ), recognizer: TapGestureRecognizer() ..onTap = () async { var url = "https://flutter-examples.com"; if (await canLaunch(url)) { await launch(url); } else { throw 'Could not launch $url'; } }), ]))); } |
10. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; import 'package:flutter/gestures.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Example of Clickable Text in Flutter"), ), body: SafeArea( child: Center( child: ClickWidget(), ))), ); } } class ClickWidget extends StatefulWidget { @override ClickWidgetState createState() => ClickWidgetState(); } class ClickWidgetState extends State<ClickWidget> { Widget build(BuildContext context) { return Center( child: RichText( textAlign: TextAlign.center, text: TextSpan(children: [ TextSpan( text: "To Learn More About Flutter ", style: TextStyle(fontSize: 20, color: Colors.black), ), TextSpan( text: "Click Here", style: TextStyle( fontSize: 20, color: Colors.blue, decoration: TextDecoration.underline, ), recognizer: TapGestureRecognizer() ..onTap = () async { var url = "https://flutter-examples.com"; if (await canLaunch(url)) { await launch(url); } else { throw 'Could not launch $url'; } }), ]))); } } |
Screenshots:
