How to create Hyperlink text in Flutter
Hyperlink text allows users to interact with the text, navigate to a specific URL, or perform an action. In Flutter, we can create hyperlink text using the Text widget and the InkWell widget.
Applications
We can use hyperlinks in a variety of ways in a Flutter app. Some examples include:
Navigation: Hyperlinks can be used to navigate between different pages or screens within an app.
Web Pages: Hyperlinks are widely used to open web pages in the default browser. By incorporating hyperlinks in a
Textwidget, users can easily access external websites or resources with a simple tap.Email and phone: Hyperlinks are effective in opening email and phone apps. In a
Textwidget, hyperlinks can trigger actions such as composing an email to a specific address or initiating a phone call to a particular number.Social media: Hyperlinks play a significant role in opening social media apps. Users can effortlessly navigate to specific social media profiles or content by embedding hyperlinks in a
Textwidget.App content: Hyperlinks help direct users to specific content within an app. For example, within a
Textwidget, hyperlinks can open particular articles, videos, or resources within the app.PDF or document: Hyperlinks can open PDFs or documents within the app or in the default document viewer. Incorporating hyperlinks in a
Textwidget allows users to access and navigate through various sections or pages within the document.
Implementation
We can follow the instructions given below to add a hypertext with Text widget in UI.
Add dependencies
We can create a Text widget with a hyperlink using the InkWell widget and the url_launcher package. We can add it into pubspec.yaml file by adding the following lines under the dependencies section:
dependencies:
url_launcher:
Leaving the version place empty will install the latest available version of the package.
Now we can install this dependency by running the following command.
flutter pub get
After adding the dependencies, we can import the packages into the dart file by adding the following line of code at the top.
import 'package:url_launcher/url_launcher.dart';
Create a Text widget wrapped with InkWell Widget
The InkWell widget in Flutter is a visual element that detects taps and provides visual feedback to the user. By utilizing the onTap property, we can define a callback function triggered when the user taps the associated text, allowing us to perform actions or handle events accordingly. We can also customize the Text widget according to our needs.
InkWell(onTap: _launchURL,child: const Text('Visit Educative.io',style: TextStyle(fontSize: 30,color: Colors.blue,decoration: TextDecoration.underline,),),),
Create the callback function
When the user taps on the text, this function will be invoked. To open a URL in the default browser, we can utilize the launch function from the url_launcher package. This allows us to seamlessly direct users to the specified URL with a single tap.
_launchURL() async {Uri _url = Uri.parse('https://www.educative.io');if (await launchUrl(_url)) {await launchUrl(_url);} else {throw 'Could not launch $_url';}}
Code explanation
Line 1: This line defines an asynchronous function named
_launchURL. Theasynckeyword indicates that this function can perform asynchronous operations.Line 2: This line declares a variable
_urlof typeUriand assigns it the value of the URL'https://www.educative.io'by parsing it using theUri.parsemethod. The_urlvariable represents the URL that will be launched.Line 3: This line checks if the
launchUrlfunction returns a value that can be awaited.Line 4: If the condition in the previous line evaluates to true, this line uses the
launchUrlfunction to launch the URL represented by the_urlvariable. Theawaitkeyword is used to wait for the completion of the function call.Lines 5–7: If the condition in the if statement from the previous line evaluates to false, the code execution jumps to this
elseblock. It signifies that the URL launch was unsuccessful and throws an exception.
Complete code
We get the following output by putting together the code explained above.
name: flutter_simple_web_app
description: A simple web app with Flutter
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
url_launcher:
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
#assets:
# - assets/
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packagesConclusion
Hyperlink text in Flutter allows users to interact with the text, navigate to URLs, and perform actions. We can easily integrate hyperlinks into our Flutter app by following the implementation steps, which include adding dependencies and creating the necessary callback function.
Free Resources