flutter_link_preview_update #

Maintained by Jorge Nunes — github.com/staminna

A URL preview widget for Flutter: fetches a page and extracts its title, description, icon and image, with OpenGraph support, caching, charset handling and Flutter Web support.

Original credits #

This package is a fork of flutter_link_preview by yungzhu, whose work is the foundation of everything here. All credit for the original design and implementation belongs to the original author; this fork exists to carry it forward to Dart 3 and Flutter Web, and is published under the original MIT licence.

Language: English | 中文简体

Special feature #

• Null safe, Dart 3 / Flutter 3.22+, works on all platforms including Flutter Web
• Optional isolate parsing (useMultithread) to keep the main isolate free
• Support for content caching and expiration mechanisms to return results faster
• Better fault tolerance, multiple ways to find icons, titles, descriptions, image
• Charset aware: honors Content-Type / meta charset, including GBK — no messy code
• Optimized for large files with better crawl performance
• oEmbed: reads YouTube, SoundCloud, Vimeo, X, Spotify and anything that advertises an endpoint — the sites whose HTML carries no OpenGraph at all
• Support gif, video and other content capture
• Supports custom builder

Getting Started #

FlutterLinkPreview(
    url: "https://github.com",
    titleStyle: TextStyle(
        color: Colors.blue,
        fontWeight: FontWeight.bold,
    ),
)

Result:

Custom Rendering #

Widget _buildCustomLinkPreview(BuildContext context) {
  return FlutterLinkPreview(
    key: ValueKey("${_controller.value.text}211"),
    url: _controller.value.text,
    builder: (info) {
      if (info == null) return const SizedBox();
      if (info is WebImageInfo) {
        return CachedNetworkImage(
          imageUrl: info.image,
          fit: BoxFit.contain,
        );
      }

      if (info is! WebInfo) return const SizedBox();
      final webInfo = info;
      if (!WebAnalyzer.isNotEmpty(webInfo.title)) return const SizedBox();
      return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: const Color(0xFFF0F1F2),
        ),
        padding: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              children: <Widget>[
                CachedNetworkImage(
                  imageUrl: webInfo.icon ?? "",
                  imageBuilder: (context, imageProvider) {
                    return Image(
                      image: imageProvider,
                      fit: BoxFit.contain,
                      width: 30,
                      height: 30,
                      errorBuilder: (context, error, stackTrace) {
                        return const Icon(Icons.link);
                      },
                    );
                  },
                ),
                const SizedBox(width: 8),
                Expanded(
                  child: Text(
                    webInfo.title ?? "",
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
            if (WebAnalyzer.isNotEmpty(webInfo.description)) ...[
              const SizedBox(height: 8),
              Text(
                webInfo.description ?? "",
                maxLines: 5,
                overflow: TextOverflow.ellipsis,
              ),
            ],
            if (WebAnalyzer.isNotEmpty(webInfo.image)) ...[
              const SizedBox(height: 8),
              CachedNetworkImage(
                imageUrl: webInfo.image ?? "",
                fit: BoxFit.contain,
              ),
            ]
          ],
        ),
      );
    },
  );
}

Flutter Web #

The package compiles and runs on Flutter Web, with two browser-imposed caveats:

• CORS: the browser only allows fetching sites that send permissive Access-Control-Allow-Origin headers. Most arbitrary sites do not, so previews on web typically require routing requests through your own proxy. When a fetch is blocked, getInfo returns null and the widget renders nothing.
• Browsers follow redirects transparently and drop restricted headers (User-Agent, Cookie), so WebInfo.redirectUrl may simply equal the requested URL on web.

useMultithread silently degrades to same-isolate execution on web (isolates are unavailable there).

Migrating to 2.0 #

Version 2.0.0 is a breaking modernization release (null safety, Dart 3, Flutter Web):

• Requires Dart >= 3.4 / Flutter >= 3.22.
• builder is now Widget Function(InfoBase? info)? — handle null and use is WebInfo / is WebImageInfo checks (implicit downcasts from InfoBase no longer compile).
• WebInfo.title/description/icon/image are String?; WebInfo.redirectUrl is non-null.
• Disable caching with cache: Duration.zero instead of null.
• WebAnalyzer.userAgent replaces the old hard-coded user agents; WebAnalyzer.logger replaces console prints; getInfo accepts a timeout.
• Removed: the accept-all invalid-certificate callback, the hard-coded weibo.com cookie, and other 2020-era site-specific hacks.

Sample code #

Click here for a detailed example.

Credits #

This package was originally created by yungzhu — all the core scraping and preview design is theirs (original repository). Version 2.0.0 is a community modernization (null safety, Dart 3, Flutter Web) building on that work.