Easy Url Preview

This package helps to get and display the url preview.

Features

  • Get the preview data of the url.
  • Display the preview data in a widget.
  • Save the preview data to local storage and reuse it.

Known issues

  • When this package is used in web, the preview data may not be loaded due to the CORS policy. It is recommended to use this package in mobile apps.

UrlPreview widget

  • text: The text that contains the url.
  • maxLinesOfDescription: The maximum number of lines to display the description. Default is 2.

How to use

SizedBox(
  width: MediaQuery.sizeOf(context).width * .6,
  child: UrlPreview(
        text: "This is the text: https://www.flutterflow.io/flutterflow-developer-groups."
    ),
),

How to get preview data

  • Create an instance of UrlPreviewModel.
  • Load the preview data by calling load method with the text that contains the url.
  • Check if it has the preview data by calling hasData.
  • Save the preview data to database for later use. Once the preview data is saved, the app can display the preview data without loading it again.

Example: Note, this code may not work as it is. You need to implement the database class to save the preview data.

// Define an instance of UrlPreviewModel
final model = UrlPreviewModel();

// Load the site preview
await model.load("This is the text and url: https://google.com.");

// Check if it has the preview data and save it to database.
if (model.hasData) {
    await database.save(
        previewUrl: model.firstLink,
        previewTitle: model.title,
        previewDescription: model.description,
        previewImageUrl: model.image,
    );
}

How to dispay the preview

You can pass text to UrlPreview widget to display the preview data. The text should contain the url.

Or once, you have the preview data, you can pass the data to UrlPreview widget to display the preview data without loading it.

 UrlPreview(
    previewUrl: message.previewUrl!,
    title: message.previewTitle,
    description:
        message.previewDescription,
    imageUrl: message.previewImageUrl,
),

Libraries

easy_url_preview