Image overflow Flutter

Viewed 592

I have an overflow on this image :

Container(
  width: MediaQuery.of(context).size.width,
  child: Image.network(imageSomwhereFomTheInternet),
  ),

How can I display a generic image from the internet preventing it to change its proportions? (I mean, if I fix an height or width the image could be "damaged" by this decision, I would like to use an automatic widget that fit this image in a certain Box, or something like that).

I don't know much about "How handle images", if you can suggest me something easy to understand where I can read more I would be very happy.

1 Answers

You can use fit property of image

Container(
  child: Image.network(
    "https://images.unsplash.com/photo-1547721064-da6cfb341d50",
    fit: BoxFit.cover,
  ),
)

You can choose which suits you best from following:

BoxFit.contain- As large as possible but contained within the Container

BoxFit.cover- As small as possible but covering the entire Container

BoxFit.fill- Fill the entire Container but may distort the image aspect ratio

Related