How to display images from url or network images in Flutter?

Today, we cannot imagine an app or a website without media contents like images or a video. Displaying images has become a more basic or fundamental feature of an app or a website like never before.

In this tutorial, we will discuss both how to add an image from network url as the child or background of a container as well as various fit arguments that can be used.

Contents

1. Introduction to Image widget

2. Display image from url as child of a Container

3. How to use fit argument in Image Widget

4. Display image from url as background of a Container

5. Interactive Example

Introduction to Image widget

In Flutter we use the Image widget to display images. It supports image formats like PEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP. In flutter, the network image is displayed as the child of a container using the Image.network() constructor. Image class has constructors:

1. Image.asset – To display image from assets bundle
2. Image.file – To display image from a file
3. Image.memory – To display image from Uint8List
4. Image.network – To display image from a URL

In this tutorial, we will be learning how to use Image.network with code snippets showing flutter network image examples.

Simple Implementation

This is a simple code snippet showing the implementation of Image.network as an example. Here we are using 2 basic arguments that will be handy while using Image.network. The url and width of image are used in the example as arguments. The width and height arguments can be used to control the size of the image displayed. On execution the flutter will load the image from web or url given and display it inside the container.

Fit Argument for Image

Instead of giving the width, you can fit the network image inside a container with the fit argument. Here we use Boxfit.contain which makes the image contained inside the Container as shown in the image. Values that can be given to the fit argument are:

• 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
• BoxFit.fitHeight – The height of the image will be equal to container. It will not mess with image aspect ratio
• BoxFit.fitWidth – The height of the image will be equal to container.
• BoxFit.none – Image is not resized at all
• BoxFit.scaleDown – Scales down the image to fit inside the Container

Image as the background of a Container

The code snippet above shows, how to display a network image as the background of a Container. For this, we use the NetworkImage() widget. Here NetworkImage() is given as the value for the image property of the DecorationImage() of a container. Fit argument can also be used for DecorationImage() to adjust the size of the network image shown.