Link previews for Flutter web

Link preview packages work on Android and iOS but fail on Flutter web. The reason: on web, http.get runs in the browser, which blocks reading another site's HTML unless that site sends CORS headers, and most don't. You get a ClientException: XMLHttpRequest error.

unfurlr sends Access-Control-Allow-Origin: *, so your Flutter web app can call it directly and get the metadata already parsed.

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<Map<String, dynamic>> preview(String url) async {
  final r = await http.get(
    Uri.parse('https://YOUR-UNFURLR-HOST/v1/metadata')
        .replace(queryParameters: {'url': url}),
    headers: {'X-API-Key': const String.fromEnvironment('UNFURLR_KEY')},
  );
  final d = jsonDecode(r.body) as Map<String, dynamic>;
  if (r.statusCode != 200) throw Exception(d['error']['message']);
  return d; // title, description, images, favicon, site_name…
}

Things to know

• Any key compiled into a web app is visible to users. Use a free key for prototypes; for production, call unfurlr from your backend.
• Free tier: 500 requests/month. Repeat URLs are cached for 24 h but still count.
• No JavaScript rendering; X, Reddit and Meta pages aren't supported.

Get a free key API docs