Create Clickable Hyperlink Text in Flutter Android iOS Example

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.

2. Put url_launcher: ^5.7.10 under dependencies block.

Source code of my pubspec.yaml file after adding above package:

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.

4. Now open your project’s main.dart file and import material.dart, url_launcher.dart and gestures.dart package in your project.

5. Creating void main runApp() method and here we would call our main MyApp class.

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.

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.

8. Creating our main child class named as ClickWidgetState extends State.

9. Creating Widget Build Area in ClickWidgetState class -> Center widget -> Rich Text widget -> Text Span widget and creating Clickable Hyperlink Text in Flutter.

10. Complete source code for main.dart file:

Screenshots:

Create Clickable Hyperlink Text in Flutter Android iOS Example

Leave a Reply

Your email address will not be published.