Flutter Linkify: Transforming Your Text into a Web of Clickable Inline Links

In the world of mobile application development, the ability to integrate clickable inline links within the app's text content is a feature that significantly enhances user experience. Flutter, being a versatile UI toolkit, offers a myriad of possibilities to developers, and one such possibility is the creation of clickable inline links using the Flutter Linkify package.

This blog will explore the technicalities, features, and implementation of Flutter Linkify, ensuring that your Flutter apps are functional but also interactive and user-friendly.

Introduction to Flutter Linkify package

The flutter_linkify package is a powerful tool that turns text URLs into clickable inline links within your Flutter application. This functionality is essential to provide users the convenience of navigating to web pages, dialing phone numbers, or even sending emails directly from the app. With Flutter Linkify, developers can easily convert plain text containing URLs into clickable text, enhancing the interactivity of their app's text component.

Getting Started with Flutter Linkify

To begin using Flutter Linkify, import the package into your Flutter project. This is done by adding the following line to your pubspec.yaml file:

1dependencies:
2  flutter_linkify: ^6.0.0
3

After adding the dependency, run flutter packages get to install the package. Then, you can start using the Flutter Linkify package by importing it into your Dart files:

1import 'package:flutter_linkify/flutter_linkify.dart';
2

The Mechanics of Clickable Inline Links

Clickable inline links are more than just hyperlinks; they are integral to the app's user interface. The Flutter Linkify package auto-detects URLs, email addresses, and phone numbers within a text string and converts them into clickable links. This feature supports URLs and phone links, allowing users to open phone number links with a single tap.

1import 'package:flutter/material.dart';
2import 'package:flutter_linkify/flutter_linkify.dart';
3import 'package:url_launcher/url_launcher.dart';
4
5void main() {
6  runApp(MyApp());
7}
8
9class MyApp extends StatelessWidget {
10  @override
11  Widget build(BuildContext context) {
12    return MaterialApp(
13      home: Scaffold(
14        body: Center(
15          child: Linkify(
16            onOpen: (link) async {
17              if (await canLaunch(link.url)) {
18                await launch(link.url);
19              } else {
20                throw 'Could not launch $link';
21              }
22            },
23            text: "For more information, visit https://www.example.com",
24          ),
25        ),
26      ),
27    );
28  }
29}
30

In the above example, the Linkify widget from the Flutter Linkify package turns text URLs into clickable inline links. The onOpen callback is provided to handle the action when a user taps on the link.

Customizing the Link Detection

The Flutter Linkify package allows developers to modify the regex pattern depending on the specific needs of their application. This level of customization is crucial when dealing with an unexpected match or when you want to limit the clickable links to certain link types.

1Linkify(
2  onOpen: _onOpen,
3  text: "Created by https://www.example.com",
4  options: LinkifyOptions(humanize: false),
5  linkifiers: [
6    UrlLinkifier(),
7  ],
8  style: TextStyle(color: Colors.amber),
9  linkStyle: TextStyle(color: Colors.blueAccent),
10
11)
12

In this snippet, the LinkifyOptions and linkifiers properties are used to customize the behavior of the link detection.

Integration with Other System Apps

One of the strengths of Flutter Linkify is its ability to integrate with other system apps. When a user taps on a clickable link, the package can launch the appropriate system app to handle the URL, whether a web browser, email client, or phone dialer.

Handling Edge Cases and Feature Requests

Developers must be prepared to handle edge cases where the Flutter Linkify package might throw an unexpected match. It's also essential to consider user feedback and feature requests to improve the package's functionality and support for different link types.

Conclusion

The Flutter Linkify package is an essential tool for Flutter developers looking to incorporate clickable inline links into their applications. By understanding how to use and customize this package effectively, developers can significantly enhance the user experience of their apps, making text content more interactive and accessible. Whether it's turning text URLs into clickable inline links or integrating with system settings and other system apps, Flutter Linkify provides a robust solution for in-text navigation.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.