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

user_6178056 0
Viewed 1376

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?

flutter-web flutter
3 Answers

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.

user_89927320

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

user_3235470

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.

user_79463850
Related