Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rich link preview in flutter

Tags:

Is it possible to make a preview from an url, grabbing all the information such as title, relevant texts and images. Is there any plugins I can use readily?

See this Native android plugin

like image 555
Shyju M Avatar asked Nov 21 '18 08:11

Shyju M


People also ask

How do I show link preview in flutter?

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.

What are rich link previews?

DEFINITION. Choosing Rich Link display will add pre-formatted advance styling to regular hyperlinks. Rich links look ahead at the destination of a link and pull back details that can be displayed for the user. These details include preview text and a teaser image.


1 Answers

You can do this way :

1)Create a user at https://www.linkpreview.net

2)Generate an Access Key.

3)From your code call

 http://api.linkpreview.net/?key=<Your_API_KEY_From_Step_2>&q=https://www.google.com

It returns the meta tags in JSON as below :

 {"title":"Google","description":"Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.","image":"http:\/\/www.google.com\/images\/branding\/googlelogo\/1x\/googlelogo_white_background_color_272x92dp.png","url":"https:\/\/www.google.com\/"}

4) Use it in flutter widget to create a preview.

like image 73
Sudip Avatar answered Nov 15 '22 11:11

Sudip