There is, of course, a plugin that does the job of styling links in text for us, flutter_linkify. It does the job described in the previous section and presents this to us through the Linkify widget. It parses a text looking for links, and uses spans to differentiate between simple text and links, and, as a bonus, it exposes useful features:

• The onOpen property, which expects a callback to handle a click on a link
• The humanizing property, which displays a link without HTTP/HTTPS

We have changed our Favors app to show the links from the description of the request in the favor cards.

The changes to make the links appear and be clickable are minimal:

1. First, we add the plugin as a dependency:

dependencies:
  flutter_linkify: ^2.1.0 # Flutter Linkify plugin

2. After that, in the FavorCardItem widget, we swap its description Text child to the new Linkify widget

This is what it looked like before:

// in the build method of FavorCardItem class, favor description
    Text(
        favor.description,
        style: bodyStyle,
    ),

This is what it looked like now:

import 'package:flutter_linkify/flutter_linkify.dart'; // import plugin library

// in the build method of FavorCardItem class, favor description
    Linkify(
        text: favor.description,
        humanize: true, 
    ),

This will make the link clickable and with a distinct style:

Text that starts with http:// or https:// appears as a link and is clickable. The next step is to handle the click to open the target URL.