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:
Comments
Post a Comment