CODEWITHSUNDEEP
flutterflutter-web
Kin Pu
Kin Pu

Reputation: 430

Is it possible to show links preview from Flutter web links?

I am thinking of developing an e-commerce app on flutter web, using Navigator 2.0, maybe beamer.

I would like people to be able to share flutter web links and show previews on social networks. Is this possible?

Just to clarify: I am not looking to show previews of other sites on my web app. I would like to show the preview of my flutter web app links on a social network. Is that possible?

Upvotes: 7

Views: 5946

Answers (6)

Mohammad Ersan
Mohammad Ersan

Reputation: 12444

Meta tags are part of the html file that being served as response to the "meta tags preview parser", Flutter serves static html file (index.html) and dynamic js along with it,

If you want to include only metadata response for all requests, then you can just modify the index.html file under your web source code.

but if you need to make a dynamic metadata based on the page the user on, you need to serve dynamic html page for each request, like below.

And from what I have tried, I wasn't able to do it from flutter side, but I had to modify the html response per request, checkout this article: https://almog.io/blog/dynamic-open-graph-meta-tags-flutter-web.

also I have included part of my code (its hosted over firebase hosting):

exports.dynamicMetaTagsUpdate = functions.https.onRequest(async (request, response) => {

    let html = fs.readFileSync("./index.html", "utf8");
    let id = request.path.split("/").pop()

    try {
        let metaStart = html.indexOf("<!--  META TAGS START-->")
        let metaEnd = html.indexOf("META END")
        let start = html.substring(0, metaStart);
        let injected = await getMetatags(id);
        let end = html.substring(metaEnd, html.length);
        return response.send(start + injected + end);
    } catch (e) {
        console.log(e);
        return response.send(html);
    }
});

The js function getMetatags(id) is a function that returns a string of meta set that I need to include into the response html, for example:

  <meta property="og:type" content="website">
  <meta property="og:title" content="${author}">
  <meta property="og:description" content="${description}">
  <meta property="og:image" content="${image}">

In result the html response will look something like this:

<!DOCTYPE html>
<html>
<head>
 
    <base href="/">

    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="app name">
    <link rel="apple-touch-icon" href="icons/Icon-192.png">


    <!--  META TAGS START-->

    <title>app name</title>
    <meta name="description"
          content="1234 56789 0123">

    <!-- Google / Search Engine Tags -->
    <meta itemprop="name" content="app name">
    <meta itemprop="description"
          content="1234 56789 0123">
    <meta itemprop="image"
          content="https://website.com/image.jpeg">

    <!-- Facebook Meta Tags -->
    <meta property="og:url" content="https://website.com">
    <meta property="og:type" content="website">
    <meta property="og:title" content="app name">
    <meta property="og:description"
          content="1234 56789 0123">
    <meta property="og:image"
          content="https://website.com/image.jpeg">

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="app name">
    <meta name="twitter:description"
          content="1234 56789 0123">
    <meta name="twitter:image"
          content="https://website.com/image.jpeg">

    <!--  META TAGS END-->
    
    <link rel="icon" type="image/png" href="favicon.png"/>

    <link rel="manifest" href="manifest.json">

    <script>
        // The value below is injected by flutter build, do not touch.
        var serviceWorkerVersion = '4168871932';
    </script>
    <!-- This script adds the flutter initialization JS code -->
    <script src="flutter.js" defer></script>
</head>
<body>
<script>
    window.addEventListener('load', function (ev) {
        // Download main.dart.js
        _flutter.loader.loadEntrypoint({
            serviceWorker: {
                serviceWorkerVersion: serviceWorkerVersion,
            }
        }).then(function (engineInitializer) {
            return engineInitializer.initializeEngine();
        }).then(function (appRunner) {
            return appRunner.runApp();
        });
    });
</script>
</body>
</html>

Upvotes: 5

Omwa Charles
Omwa Charles

Reputation: 1

You can use flutter_link_previewer package :

Map<String, PreviewData> datas = {};
String url = "https://github.com/";

Widget previewLink ()
  {
    return LinkPreview(
      metadataTitleStyle: const TextStyle(color: Colors.black),
      linkStyle: const TextStyle(color: Colors.blue),
      metadataTextStyle: const TextStyle(color: Colors.black),
      enableAnimation: true,
      onPreviewDataFetched: (data) {
        setState(() {
          datas = {
            ...datas,
            url: data,
          };
        });
      },
      text: url,
      width: MediaQuery.of(context).size.width,
      previewData: datas[url],
    );
  }

more info here

Upvotes: -2

user17864647
user17864647

Reputation: 310

You can refer to this documentation by apple, and use it in your index.html file. This meta data is the most used way of adding a preview to your link. Whenever you post on social media or send a link in messages, it will show a preview.

Upvotes: 1

log0
log0

Reputation: 10947

Social networks use a special open graph tags (og:title, og:image ...) in the html page header to build the link preview.

Flutter web apps are single page applications, meaning that if you always want the same preview for the root link to your app or any links inside your app, you can simply set these tags in the part of web/index.html.

If you want to have different preview for different routes. It is a bit trickier. You need to dynamically generates the og tags. This cannot be done in js since social networks bots do not run javascript. You need to create a cloud function that will run server side and rewrite the page header based on the route.

More info here: https://almog.io/blog/dynamic-open-graph-meta-tags-flutter-web

Upvotes: 0

Yohan Malshika
Yohan Malshika

Reputation: 733

Yes, You could use the AnyLinkPreview package for this problem. In that case, need to add this package into your project and then use AnyLinkPreview widget as you need.

For Example,

    final String _url =
      "https://speakerdeck.com/themsaid/the-power-of-laravel-queues";

    Widget getLinkPreview ()
    {
      return Container(
        child : AnyLinkPreview(
                        link: _url,
                        displayDirection: UIDirection.UIDirectionHorizontal,
                        cache: Duration(hours: 1),
                        backgroundColor: Colors.grey[300],
                        errorWidget: Container(
                          color: Colors.grey[300],
                          child: Text('Oops!'),
                        ),
                        errorImage: _errorImage,
                    ),
         );
    }

Note - If you need to show a preview link list then you could use the AnyLinkPreview widget inside the ListView widget.

Upvotes: -2

kishan sampat
kishan sampat

Reputation: 7

Yes, you can do that by using this library : Here's link to library

You can use Widget called as AnyLinkPreview inside MaterialApp or a scafflod.

Upvotes: -2

Related Questions