How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter?

Question

I have an image that doesn\'t match the aspect ratio of my device\'s screen. I want to stretch the image so that it fully fills the screen, and I don\'t want to crop any par

Answer 1

The following will fit the image to 100% of container width while the height is constant. For local assets, use AssetImage

Container(
  width: MediaQuery.of(context).size.width,
  height: 100,
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage("https://picsum.photos/250?image=9"),
    ),
  ),
)

---

Image fill modes:

• Fill - Image is stretched

  fit: BoxFit.fill
  

  ---

• Fit Height - image kept proportional while making sure the full height of the image is shown (may overflow)

  fit: BoxFit.fitHeight
  

  ---

• Fit Width - image kept proportional while making sure the full width of the image is shown (may overflow)

  fit: BoxFit.fitWidth
  

  ---

• Cover - image kept proportional, ensures maximum coverage of the container (may overflow)

  fit: BoxFit.cover
  

  ---

• Contain - image kept proportional, minimal as possible, will reduce it's size if needed to display the entire image

  fit: BoxFit.contain