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