Cómo crear un hipervínculo de texto en Flutter

El hipervínculo de texto, también conocido simplemente como hipervínculo o vínculo, es texto en el que se puede hacer clic y que se ve en páginas web, correos electrónicos o incluso documentos. Cuando haces clic en él, serás llevado a una nueva ubicación:

En este tutorial, aprenderemos cómo crear un hipervínculo de texto dentro de un párrafo u oración en el que se puede hacer clic y que puede incluir una URL en un navegador externo en la aplicación Flutter.

Primero, debe agregar el paquete url_launcher Flutter en su proyecto agregando las siguientes líneas en el archivo pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.0.17

Este paquete se utiliza para iniciar una URL o cualquier sitio web o página web en un navegador externo:

Cómo crear un hipervínculo de texto:

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.
      ]
  )
)

Cómo abrir una URL en un navegador externo:

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.");
}

Ejemplo de código completo de Dart/Flutter:

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."
                            ),

                         ]
                      )
                   ),
                    
                ]
              )
          )
    );
  } 
}

De esta manera, puede crear hipervínculos de texto dentro de un párrafo u oración e iniciar una URL o un sitio web en cualquier navegador externo en la aplicación Flutter.

1.10 GEEK