Flutter Create Hyperlink Text

Hyperlinks are clickable text in HTML which created using <a> Anchor tag. The purpose of Hyperlinks are to open website URL links into browser window. In flutter we can do the same using url_launcher pub package of flutter. This package allows us to implement Hyperlinking functionality in flutter app. We can create clickable text links with desired web URL.

Live Code Example - How hyperlinking working:

Flutter Create Hyperlink Text:

1. First we have to install URL_Launcher package in our flutter App. Open your flutter app folder location in Terminal and execute below command to install.

flutter pub add url_launcher

Screenshot of Terminal:

2. Open your flutter project's main.dart file and import material.dart, gestures.dart and url_launcher_string.dart package.

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'package:url_launcher/url_launcher_string.dart';

3. Defining void main function and call our main Root MyApp class.

void main() => runApp(const MyApp());

4. Defining MyApp class with ChildWidget class.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
          body: SafeArea(
              child: Center(
        child: ChildWidget(),
      ))),
    );
  }
}

5. Creating ChildWidget class and define our main ChildWidgetState class inside it.

class ChildWidget extends StatefulWidget {
  const ChildWidget({super.key});

  @override
  ChildWidgetState createState() => ChildWidgetState();
}

6. Creating ChildWidgetState class.

class ChildWidgetState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: );
  }
}

7. Creating Rich Text widget the make making multiple Text Span widget inside it. On the middle Text Span widget I am integrating the recognizer: TapGestureRecognizer method and opening the link in App's web view.

RichText(
            textAlign: TextAlign.center,
            text: TextSpan(children: [
              const TextSpan(
                text: "Hello Guys, ",
                style: TextStyle(fontSize: 24, color: Colors.black),
              ),
              TextSpan(
                text: "Click Here",
                style: const TextStyle(
                  fontSize: 24,
                  color: Colors.blue,
                  decoration: TextDecoration.underline,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () async {
                    try {
                      await launchUrlString('https:/www.codewithjam.com');
                    } catch (err) {
                      debugPrint('Something Went Wrong..');
                    }
                  },
              ),
              const TextSpan(
                text: " To Visit My Website.",
                style: TextStyle(fontSize: 24, color: Colors.black),
              ),
            ]))

8. Complete source code for main.dart file:

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'package:url_launcher/url_launcher_string.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
          body: SafeArea(
              child: Center(
        child: ChildWidget(),
      ))),
    );
  }
}

class ChildWidget extends StatefulWidget {
  const ChildWidget({super.key});

  @override
  ChildWidgetState createState() => ChildWidgetState();
}

class ChildWidgetState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: RichText(
            textAlign: TextAlign.center,
            text: TextSpan(children: [
              const TextSpan(
                text: "Hello Guys, ",
                style: TextStyle(fontSize: 24, color: Colors.black),
              ),
              TextSpan(
                text: "Click Here",
                style: const TextStyle(
                  fontSize: 24,
                  color: Colors.blue,
                  decoration: TextDecoration.underline,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () async {
                    try {
                      await launchUrlString('https:/www.codewithjam.com');
                    } catch (err) {
                      debugPrint('Something Went Wrong..');
                    }
                  },
              ),
              const TextSpan(
                text: " To Visit My Website.",
                style: TextStyle(fontSize: 24, color: Colors.black),
              ),
            ])));
  }
}

Screenshot of app: