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

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
    

    enter image description here


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

    fit: BoxFit.fitHeight
    

    enter image description here


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

    fit: BoxFit.fitWidth
    

    enter image description here


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

    fit: BoxFit.cover
    

    enter image description here


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

    fit: BoxFit.contain
    

    enter image description here

Examples related to image

Reading images in python Numpy Resize/Rescale Image Convert np.array of type float64 to type uint8 scaling values Extract a page from a pdf as a jpeg How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter? Angular 4 img src is not found How to make a movie out of images in python Load local images in React.js How to install "ifconfig" command in my ubuntu docker image? How do I display local image in markdown?

Examples related to containers

How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter? How to get IP address of running docker container What's the difference between ClusterIP, NodePort and LoadBalancer service types in Kubernetes? How to run a cron job inside a docker container? Connect to docker container as user other than root Starting a shell in the Docker Alpine container Docker error cannot delete docker container, conflict: unable to remove repository reference How can I keep a container running on Kubernetes? List only stopped Docker containers docker: "build" requires 1 argument. See 'docker build --help'

Examples related to flutter

Flutter Countdown Timer How to make an AlertDialog in Flutter? FlutterError: Unable to load asset Set the space between Elements in Row Flutter Flutter: RenderBox was not laid out Space between Column's children in Flutter How to change status bar color in Flutter? How can I add shadow to the widget in flutter? Flutter - The method was called on null Flutter- wrapping text

Examples related to stretch

How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter? CSS Div stretch 100% page height HorizontalAlignment=Stretch, MaxWidth, and Left aligned at the same time?