How to Create Text Hyperlink in Flutter

In this example, we are going to show you how to create a Text Hyperlink within a paragraph or sentence that is clickable and can lunch URL in an external browser in the Flutter app. See the example below:

First, you need to add url_launcher Flutter package in your project by adding the following lines in pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.0.17

This package is used to launch URL or any website, web page in External Browser:

See this also: How to Style Partial Part on Text() Widget in Flutter

Text.rich(
  TextSpan(
      style: TextStyle(fontSize: 27,),
      children: [
        TextSpan(
            style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
            //make link blue and underline
            text: "Hyperlink Text",
            recognizer: TapGestureRecognizer()
              ..onTap = () async {
                  //on tap code here, you can navigate to other page or URL
              }
        ),

        //more text paragraph, sentences here.
      ]
  )
)

import 'package:url_launcher/url_launcher.dart';

String url = "https://www.fluttercampus.com";
var urllaunchable = await canLaunch(url); //canLaunch is from url_launcher package
if(urllaunchable){
    await launch(url); //launch is from url_launcher package to launch URL
}else{
  print("URL can't be launched.");
}

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(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Text Hyperlink in Flutter"),
            backgroundColor: Colors.redAccent
         ),
          body: Container(
            padding: EdgeInsets.all(20),
             child: Column(
                children: [ 
                   Text.rich(
                      TextSpan(
                         style: TextStyle(fontSize: 27,),
                         children: [
                            TextSpan(
                               text: "If anyone asks which is the best website to learn flutter, tell them "
                            ),
                            TextSpan(
                               style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
                               //make link blue and underline
                               text: "FlutterCampus.com is the best website",
                               recognizer: TapGestureRecognizer()
                                  ..onTap = () async {
                                      //on tap code here, you can navigate to other page or URL
                                      String url = "https://www.fluttercampus.com";
                                      var urllaunchable = await canLaunch(url); //canLaunch is from url_launcher package
                                      if(urllaunchable){
                                          await launch(url); //launch is from url_launcher package to launch URL
                                      }else{
                                        print("URL can't be launched.");
                                      }
                                  }
                            ),
                            TextSpan(
                               text: " to learn Flutter and build beautiful apps."
                            ),

                         ]
                      )
                   ),
                    
                ]
              )
          )
    );
  } 
}