I want to get an image from a website URL in Flutter

Question

I want to fetch the image, title, and details when I enter a URL, as is done in Facebook and Twitter and etc. This is why I use the metadata_fetche package.

However, there are many websites that I want to handle that I can't get with this package. For example, Amazon Prime and U-Next movie pages.

Pages like U-Next use javascript to generate html, which seems to be very difficult, so I'd like to be able to get at least pages like Amazon Prime. Currently, the above package does not allow me to get the image and description. I think this is because Amazon Prime does not have an OGP image set. (The description is set, but it can't be retrieved for some reason. I think this is a problem with the package implementation.) I'm sure there are many other sites like Amazon Prime that do not have images set. So I'd like to know how to get just one of the most important images of a web page.

I was able to use the flutter_html package to foolishly get the image as follows. Amazon Prime HTML Source Image

final response = await http.get(Uri.parse('https://www.amazon.co.jp/gp/video/detail/B08SJ25ZGK/ref=atv_hm_hom_1_c_DEaieV_4_1'));
final document = parser.parse(response.body);
final elements = document.getElementsByClassName('DVWebNode-detail-atf-wrapper DVWebNode');
final list = elements.map((element) => element.getElementsByTagName("img")[0].attributes['src']).toList();
print(list[0]); 

However, I have to look for a tag like DVWebNode-detail-atf-wrapper DVWebNode for each and every website. Please let me know if you know of a better way to do this, as it is very difficult and impractical.

Solution 1

It's really easy. You can use Image.network() like this.

Image.network(
    'YOUR_URL_HERE',
)

You can use the same widget to display the GIF.

Image.network(
    'https://media.giphy.com/media/65LrvAMGU650TvPgs5/giphy.gif?raw=true',
),

• How to display a placeholder image when the image is loading?

Sometimes when you load an image, it takes little time to actually get visible. Its always a good option to show something interesting while the image is being loading just like a placeholder and then just Fade-In the actual image to improve the UX. Flutter has covered the widget for that too!

FadeInImage.assetNetwork(
  placeholder: 'assets/images/placeholder.png', // Before image load
  image: 'https://picsum.photos/id/237/200/300', // After image load
  height: 200,
  width: 300,
)

Solution 2

Use Image.network constructor. The argument src is positional argument and The src, scale, and repeat arguments must not be null.

documentation - https://api.flutter.dev/flutter/widgets/Image/Image.network.html

Comments

[Yone]

I would like to fetch the image, title, and details when I enter a URL, as is done in Facebook and Twitter and etc. That's like an OGP. I think that Image.network needs to specify the URL of the image file only. Or is it possible to do it with the URL I gave in my example ?

[Yone]

I would like to fetch the image, title, and details when I enter a URL, as is done in Facebook and Twitter and etc. That's like an OGP. I think that Image.network needs to specify the URL of the image file only. Or is it possible to do it with the URL I gave in my example ?